What Do Push/Pull Classes Do in a Grid System

What do push/pull classes do in a grid system?

They're for reordering content. Lets say you want your content to come first in the HTML markup and then a sidebar second, but you want the sidebar to come first in the display (on the left) and then the content to come second (on the right).

Using Bootstrap as an example:

<div class="row">
    <div class="col-md-9 col-md-push-3">This is content that comes <strong>first in the markup</strong>, but looks like it comes second in the view.</div>
    <div class="col-md-3 col-md-pull-9">This is the sidebar, that comes <strong>second in the markup</strong>, but looks like it comes first in the view.</div>
</div>

The col-sm-push-3 means move the column 25% from the left (left: 25%).

The col-sm-pull-9 means move the column 75% from the right (right: 75%).

So in this scenario the large column is being 'pushed' the width of the small column, and the small column is being 'pulled' the width of the large column.

Demo using Bootstrap

---

Something like this:

.push-10 {
    left: calc(100% / 12 * 10);
}

Means, take the width of the container (100%), divide it by the number of columns in the grid (12) and multiple it by the number you want to push it by (10). Leaving you with 83.33333333%.

Role of push/pull and offset in Bootstrap grid system

Here is my understanding about Bootstrap 3 grid system:

• All column dimensions are calculated using the border-box model. So, when we change the value of border-width and padding properties, the real width column is not changed.

• The width of the column is set by the .col-xx-n class.It is set to n/12 of the width of the parent container (the .row element)

• The position of the column is set via two methods:

  • The .col-xx-offset-n class moves the column to the right by a value of n/12 of the width of the container. This is done by applying a value of n * 100% / 12 to the left-margin property to the column.

  • The .col-xx-push/pull-n class moves the column to the left/right by a value of n/12 of the width of the container. This is done by applying a value of n * 100% / 12 to the left/right property to the column.

For example, let see your article element in large screen. We divide the current .row element to 12 columns, called column 1 - column 12.

• Its width is set to 8/12 of the width of the .row element. Its position now is from 1st column to 8th column.

• It is pushed towards the right 1 column by the .col-lg-offset-1 class. Now, Its position now is from 2nd column to 9th column (its left margin fills the 1st column).

• When the .col-lg-push-3 class is applied to the column, the column itself is now moved to the left 3 columns. Its position now is from 4th column to 11th column.

• Remember the .col-lg-offset-1 class and it left margin? The left margin fills the 4th column now. Finally, the column position now is from the 5th column to the 12th column.

Hope this help.

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

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.

Real use case for Bootstrap column ordering (push, pull)

Column ordering classes allow us to change the order of our grid system based on different browser sizes. This means that on a large screen, you can have a different grid than on a mobile screen.

You can check this for example,
https://scotch.io/tutorials/reorder-css-columns-using-bootstrap

Real use case for Bootstrap column ordering (push, pull)

Column ordering classes allow us to change the order of our grid system based on different browser sizes. This means that on a large screen, you can have a different grid than on a mobile screen.

You can check this for example,
https://scotch.io/tutorials/reorder-css-columns-using-bootstrap

Bootstrap PUSH vs PULL vs OFFSET?

In offseting--Move columns to the right using .col-md-offset-* classes.
And through pull and push, Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

---

Related Topics