Skip to content
Related Articles

Related Articles

What are Offsetting columns in Bootstrap 3 Grid System ?

View Discussion
Improve Article
Save Article
  • Last Updated : 16 Mar, 2022

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 use the ‘.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-md-n’ class with ‘.col-md-offset-n’ class which pushes column by n columns.

Syntax:

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

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=
        integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"  
        crossorigin="anonymous">
  <!-- Bootstrap CDN for JavaScript -->
  <script src=
          integrity=
"sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" 
          crossorigin="anonymous">
  </script>
  
  <script src=
          integrity=
"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
          crossorigin="anonymous">
  </script>
  
          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=
        rel="stylesheet"
        integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
        crossorigin="anonymous">
  <!-- Bootstrap CDN for JavaScript -->
  <script src=
          integrity=
"sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
          crossorigin="anonymous">
  </script>
  
  <script src=
          integrity=
"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 
          crossorigin="anonymous">
  </script>
  
          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 UI by easily arranging the content on the webpage.
  • You can easily break a row into different parts by using this.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!