What Are Offsetting Columns In Bootstrap 3 Grid System

Trang chủ » Html Col-md-offset » What Are Offsetting Columns In Bootstrap 3 Grid System

Có thể bạn quan tâm

Offsetting: It looks awesome when the content of our webpage is visible on the full viewport width of the available device width. But in some cases, we have to provide some area to the components of web page around them which makes them look more awesome. So, To achieve this target bootstrap introduces us to the concept of Offsetting. Offsetting is the way of pushing or moving the objects on the webpage to provide space around them.

Environment setup: We need to add bootstrap CDN link to our HTML document for using column-offsetting as:

<!– Bootstrap CDN link –><link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3″ crossorigin=”anonymous”>

<!– Bootstrap CDN for JavaScript –><script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js” integrity=”sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13″crossorigin=”anonymous”></script><script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js”integrity=”sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p”crossorigin=”anonymous”></script><script src=”https://code.jquery.com/jquery-3.6.0.min.js”integrity=”sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=” crossorigin=”anonymous”></script>

To implement Offsetting we usethe ‘.offset-n’ class where ‘n’ specifies the width by which a component has to move from its original position.

Syntax:

<div class="offset-n"> //content of div tag </div>

Column Offsetting: Column offsetting is used to move or push a column from its original position to a specified width or space. To implement column offsetting we use the ‘.col-m’ class with ‘.col-offset-n’ class which pushes column by n columns.

Syntax:

<div class="col-m col-offset-n"> //content of div tag </div>

We can use this with different breakpoints. So here we are using it with “md” so that whatever offset we apply should be valid for medium, large, Extra large, and Extra Extra large screen sizes. Therefore, here we are using ‘.col-md-m’ class with ‘.col-md-offset-n‘ class.

Example 1: Below example demonstrates the use of column offsetting:

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap CDN link --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity= "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <!-- Bootstrap CDN for JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity= "sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"> </script> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity= "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"> </script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity= "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"> </script> <style> .green { color: green; } </style> <title>Column Offsetting</title> </head> <body> <center> <div class="box"> <h2 class="green">Welcome to GFG</h2> <br> <div class="row"> <div class="col-md-4 offset-md-4 green"> <h4>Hey Geek!</h4> <p>I'm a Offsetted column by four columns.</p> </div> </div> <div class="row"> <div class="col-md-4 offset-md-3 green"> <h4>Hey Geek!</h4> <p>I'm a Offsetted column by three columns.</p> </div> </div> <div class="row"> <div class="col-md-4 offset-md-2 green"> <h4>Hey Geek!</h4> <p>I'm a Offsetted column by two columns.</p> </div> </div> <div class="row"> <div class="col-md-4 offset-md-1 green"> <h4>Hey Geek!</h4> <p>I'm a Offsetted column by one columns.</p> </div> </div> <div class="row"> <div class="col-md-4"> <h4>Hey Geek!</h4> <p>I'm a Normal column.</p> </div> </div> </div> </center> </body> </html>

Output:

Example 2:

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap CDN link --> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <!-- Bootstrap CDN for JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity= "sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"> </script> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity= "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"> </script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity= "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"> </script> <style> .green { color: green; } </style> <title>Column Offsetting</title> </head> <body> <center> <div class="box"> <h2 class="green">GeeksforGeeks</h2> <br> <div class="row"> <div class="col-md-4 green"> <h4>Hey Geek!</h4> <p>I'm a normal columns.</p> </div> <div class="col-md-4 offset-md-4 green"> <h4>Hey Geek!</h4> <p>I'm a Offsetted column by eight columns.</p> </div> </div> <div class="row"> <div class="col-md-4 offset-md-4"> <h4>Hey Geek!</h4> <p>I'm a Offsetted column by four columns.</p> </div> </div> <div class="row"> <div class="col-md-4 green"> <h4>Hey Geek!</h4> <p>I'm a Normal column.</p> </div> <div class="col-md-4 offset-md-4 green"> <h4>Hey Geek!</h4> <p>I'm a Offsetted column by eight columns.</p> </div> </div> </div> </center> </body> </html>

Output:

Advantages:

  • It allows you to move content on the webpage easily according to your needs.
  • It provides flexibility to your content.
  • It helps you to build an attractive UIby easily arranging the content on the webpage.
  • You can easily break a row into different parts by using this.
Comment More info Next Article What is Declaration Merging in Typescript ?

A

abhisheksainiaggarwal Follow Improve

Từ khóa » Html Col-md-offset