Bootstrap Push/Pull

We have covered almost all of the fundamental concept related to bootstrap grids. Now is the time to study one last concept before moving towards bootstrap helper classes. You can change the ordering of bootstrap columns using bootstrap push/pull property. The push property pushes column towards the right hand side of the screen. Similarly, pull property pulls the columns towards the left. To use push in bootstrap code use col-sm-push-x property. Here x is the number of columns to push towards right. Similarly, for pull use col-sm-pull-x property.

Bootstrap Push

Take a look at the following example to see bootstrap push in action.

<!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;
            
        }
        .boxgray{
            background-color: gray;
        }
        
    </style>
        
    </head>
    
   
    <body>
        <div class="row">
          <div class="col-md-6 col-md-push-3 box boxblue"></div>
        </div>
    </body>

</html>

Download the code Try the code

If you run the above code, you shall see a large sky blue rectangle centered on the screen. The actual width of this rectangular div is 6 column which is half of the screen. Also, we have pushed it three columns towards right. This aligns the grid in the middle of the page. If you want to push the rectangular div to the right half side of the screen, push it 6 columns to the right.

Bootstrap Pull

In the following example we shall create two columns. One column will be pushed to extreme right while the other will be pulled to extreme left. Take a look at the following example to see how bootstrap push/pull properties work together.

<!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;
            
        }
        .boxgray{
            background-color: gray;
        }
        
    </style>
        
    </head>
    
   
    <body>
        <div class="row">
          <div class="col-md-6 col-md-push-6 box boxblue">This is left box but pushed to right.</div>
          <div class="col-md-6 col-md-pull-6 box boxgray">This is right box but pulled to left.</div>
        </div>
    </body>

</html>

Download the code Try the code

Open the above webpage in some browser. You should see two boxes of equal width. Gray box would be aligned left while sky blue box would be aligned right. However, if you look at the code you would see that code for sky blue div comes before that of the gray div. But since, we are using push the sky blue div to 6 columns towards the right and pulling the gray div to six columns to the left, sky blue div appears right aligned and gray div appears left aligned.

<<< Bootstrap Grid Offset ColumnBootstrap Helper Classes >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .