What is the difference between push and offset under the grid?

Question

I am trying to understand the difference between push and offset in Bootstrap networks. For example, the only difference between the two rows below is the third column in each. One uses push, and the other uses offset. However, both of them display exactly the same.

<div class="row"> <div class="col-md-2"> <h2>Column 1</h2> <p> This is text for column 1 </p> <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p> </div> <div class="col-md-2"> <h2>Column 2</h2> <p>This is text for column 2</p> <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p> </div> <div class="col-md-2 col-md-push-6"> <h2>Column 3</h2> <p>This is text for column 3</p> <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p> </div> </div> <div class="row"> <div class="col-md-2"> <h2>Column 1</h2> <p> This is text for column 1 </p> <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p> </div> <div class="col-md-2"> <h2>Column 2</h2> <p>This is text for column 2</p> <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p> </div> <div class="col-md-2 col-md-offset-6"> <h2>Column 3</h2> <p>This is text for column 3</p> <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p> </div> </div> 

Answer 1

Since offset uses margin-left , and push uses left :

• offset will cause other columns to move
• push (and pull) will overlap other columns

Here is a visual example: http://www.bootply.com/126557

In your example, there are no "collisions" collisions. Push and offset appear the same way as adjacent columns do not affect.

Answer 2

.col-md-offset-* : will increase the left margin by * classes

.col-md-push-* / .col-md-pull-* : will change the display order of the grid columns with classes * . Pull will send the column to the left, and push will direct it to the right.

• Documents for Offset
• Documents for push / pull

Answer 3

An offset in the bootstrap will shift the left side of the column, thus moving it or “compensating” for something to the right. Using the offset style, you can only offset objects to the right. For jerks and pulls, you can pull something to the "left or right", or you can push something opposite to the pull. Clicking or dragging items is primarily used to arrange columns.