Bootstrap Grid Offset Column

In the last article we studied how bootstrap clearfix class clears float which result in desired layout. In this article we shall study yet another awesome bootstrap trick i.e. bootstrap grid offset column. You might want to create single layout div which spans 6 columns and which is centered on the screen i.e three columns from the left and three columns from the right. You can create such layouts using bootstrap grid offset column property. Take a look at the following example to see how this works.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        
    <style>
    
        .box{
            height: 300px;
        }
        
        .boxblue{
            background-color: skyblue;
            
        }
      
        
    </style>
    </head>
    
    
    
    <body>
        
        <div class="container">
            
            <div class="row">
              
              <div class="col-md-6 col-md-offset-3 box boxblue">
              </div>
            </div>
          
        </div>
        
    </body>

</html>

Download the code Try the code

Open the above webpage in the browser. Increase the browser screen size beyond 991 pixels i.e medium size. You should see a blue box aligned center of the screen. This box is 6 columns wide with three columns offset from the left. This means that the box will also have three columns margin from the right since total number of columns will be 3+6+3=12. Therefore the box shall appear centered on the screen. If you look at the code, the property used for setting column offset is the col-md-offset-x where x is the number of columns to offset from left.

Column Offset with Multiple Columns

Column offset is a very handy property and can be used to create very attractive layouts. In the following example we shall create four column lay out where each column will have width of 2 and column offset of 1. Take a look at the following example to see how this looks.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        
    <style>
    
        .box{
            height: 300px;
        }
        
        .boxblue{
            background-color: skyblue;
            
        }
      
        
    </style>
    </head>
    
    <body>
        
        <div class="container-fluid">
            
            <div class="row">
                <div class="col-md-2 col-md-offset-1 box boxblue"></div>
                  <div class="col-md-2 col-md-offset-1 box boxblue"></div>
                 <div class="col-md-2 col-md-offset-1 box boxblue"></div>
                  <div class="col-md-2 col-md-offset-1 box boxblue"></div>
               
            </div>
          
        </div>
        
    </body>

</html>

Download the code Try the code

Now if you open the above webpage in a browser, you will see four blue boxes. Between the boxes will be some margin which is actually the column offset.

Now, you have seen what you can achieve with bootstrap grid column offset. You also have a knowledge of creating layouts for mixed screen sizes. Now, as a challenge use column offset property to set different margins for mobile phones and desktops. It should be easy and fun. Happy Coding!

<<< Bootstrap Grid Clear floatBootstrap Push/Pull >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .