What is the difference between push and offset under the grid system?
css, twitter-bootstrap, twitter-bootstrap-3, user-interface
Solution
Since offset uses `margin-left`, and push uses `left`:
- offset will force neighboring columns to move
- push (and pull) will overlap other columns
Here's a visual example: http://www.bootply.com/126557
In your example there are no column 'collisions'. Push and offset appear the same since the neighbouring columns aren't impacted.
Problem
I'm trying to understand the difference between push and offset in Bootstrap grids. For example the only difference between the two rows below is the third column in each. One uses a push and the other uses an offset. However, they both render 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 »</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 »</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 »</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 »</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 »</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 »</a></p> </div> </div> ```