3 Simple Tricks to Format Your Grids in Bootstrap

160

While working in Bootstrap, it’s possible to change column positions or add sub-columns to them as you format further. This is achieved through offsetting, nesting or reordering the columns. We explain these three concepts further, and how you can use them, below.

Column Offsetting

This basically means creating gaps between columns by moving the front column to the right. In Bootstrap 4 you move column using the class prefix offset-. It’s an amazing trick to use in Bootstrap especially when you intend to expand the left margin of the columns.

There are four ways to offset columns in Bootstrap as shown by the following classes;

  • Col-lg-offset-
  • Col-md-offset-
  • Col-sm-offset-
  • Col-xs-offset-

And, here is a html/css diagram explaining further how to achieve the offset column, specifically using the class col-sm-offset-4:

bootstrap-1

This is what you should have on your browser once you are done with the above code:

bootstrap-2

Column Nesting

Nesting means to create new columns, or sub-columns, within another column. You do this by creating a new row below the first column created then fill it with custom columns that must also span within the Bootstrap 12 scale. The custom columns will also be confined within the width of the original column (or the parent column).

Below is the html/css code to achieve this:

bootstrap-3

Inside the parent column we create new rows and add three classes col-sm-3. This adds three more columns inside an original one.

And this is how it should look on your browser:

bootstrap-4

Column Reordering

Reordering simply means changing the positions of two columns within the grid. One column moves to the right while the other moves to the left taking each other’s original positions. Reordering is often a handy trick when formatting webpages to appear differently across screens.

We can reorder columns using two main classes namely col-column size-pull- and col-column size-push-. These two actions produce for main classes shown below;

  • Col-xs-pull- & col-xs-push- (extra small screens)
  • Col-sm-pull- & col-sm-push- (small screens)
  • Col-md-pull– & col-md-push- (medium screens)
  • Collg-pull- & col-lg-push- (large screens)

Below is a html/css code example using the classes col-md-4 & col-md-8:

bootstrap-5

And on the browser:

bootstrap-6

Now we push one column to the right by eight columns and the other to the left by four columns all for medium size screens:

bootstrap-7

The final result is here:

bootstrap-8

That’s it, you now can alter your columns on Bootstrap 4 using these three simple tricks. They will come in handy, especially in your future complex CSS coding projects.

You might also like More from author

Comments

Loading...