Bootstrap grid system overview

UPDATE: There is a new article for Bootstrap 4 grid system which will help those who use a newer version of Bootstrap.

Bootstrap grid system was confusing for me the first time I used it. Recently I did some research to change the old CSS framework that I usually use for my web projects. After long searches and tests I decided that Bootstrap 3.0 it will be the best for me. I'm still not fully happy about Bootstrap, mainly because the fact that the menu does not accept multiple menu levels, but I have did some changes to make it work as I want.

As I said, the problem which I encountered with Bootstrap was the grid system. Although it is something logical, it was confusing for me in the beginning and it took me some time to understand it so I can benefit the maximum of all features.

Although Bootstrap has a special section dedicated to the grid system and also some good examples of how to use it, I hope that this article will help those which are still confused after reading those pages and hope to have Bootstrap 3 grid system explained.

Bootstrap grid system is based on 12 columns which are percentage-based, which makes it responsive. The gutter between these columns is 30px (15px on each side of a column) and it is actually the column padding and not margin. Columns are included in rows to make horizontal groups of columns. To make everything work properly, these rows need to be placed within a .container . Bootstrap is a mobile first CSS framework, which means that mobile first styles can be found throughout the entire library instead of in separate files or a separate section in the CSS file.

For the columns there are four class prefixes: .col-xs- (for extra small devices like phones – width < 768px), .col-sm- (for small devices like tablets – width ≥ 768px), .col-md- (for medium devices like desktops – width ≥ 992px) and .col-lg- (for large devices like desktops – width ≥ 1200px). Each of these classes have numbers from 1 to 12 attached to them, corresponding to certain percentage values. For example we have .col-xs-1 with a width of 8.333333333333332%, .col-xs-2 with a width of 16.666666666666664%, .col-xs-3 with a width of 25% and so on to .col-xs-12 which has a width of 100%. For the other classes we have the same idea. For example we will have .col-sm-1 with a width of 8.333333333333332%, .col-sm-2 with a width of 16.666666666666664%, .col-sm-3 with a width of 25% and so on to .col-sm-12 which has a width of 100%.

So a piece of code will look like this:

< div class = " container " > < div class = " row " > < div class = " col-xs-7 " > ..... </ div > < div class = " col-xs-5 " > ..... </ div > </ div > </ div >

A key aspect in understanding Bootstrap grid system is the fact that, since Bootstrap is a mobile first CSS framework, the first classes which are declared are .col-xs-* . The other three are declared in media queries corresponding to the specific devices. In other words, grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. For example, applying any .col-sm- class to an element will not only affect its styling on small devices but also on medium and large devices if .col-md- and .col-lg- classes are not present.

Are these still confusing for you? Don't worry! Let's see some examples!

A few examples to understand Bootstrap grid system

The first four examples will show you how every class behaves on different devices. For a better understanding, every class has a specific color which shows when it is actually applied and the grey color shows that it is not applied. When a class is not applied, the width of the column it is 100%.

The first example is showing how .col-xs- behaves on all devices. You will notice that it behaves the same on all devices because, remember, .col-xs- is declared first and it is available for all devices, since the other three are declared inside media queries and are available on certain devices.

The second example is showing how .col-sm- behaves on all devices. You will notice that it stays the same on all devices except on small devices (phones) because .col-sm- is declared inside media query: @media (min-width: 768px) {...} .

The third example is showing how .col-md- behaves on all devices. The class is applied only on medium and large devices. That is because .col-md- is declared inside media query: @media (min-width: 992px) {...} .

The fourth example is showing how .col-lg- behaves on all devices. The class is applied only on large devices. That is because .col-lg- is declared inside media query: @media (min-width: 1200px) {...} .

The next three examples will show different combinations of the four classes and how they behave on all devices. Depending on the color you will see which class is applied on every device. You will notice that there is a mix of classes and also many columns have multiple classes assigned. As we know, when multiple classes are assigned, the class which it is applied first is the first on the right.

Please check the following example to see how mixed classes are working on various devices.

The next example it is similar as above, but this time, as you will notice, some of the columns get stacked.

The last example is a little more complex because it has nested columns. To understand better don't forget that the nested columns and also percentage-based and they are calculated relative to their parent and not the whole row.

Understanding offset, push, pull and column clearing

Besides the four classes we have reviewed above, there are also a few important things to know.

One thing is offset. When you apply an offset, this means to move columns to the right using .col-md-offset-* classes, or it can be .col-xs-offset-* , .col-sm-offset-* , .col-lg-offset-* . As you know, in place of * can be any number from 1 to 12.

So for example let's consider this code:

< div class = " container " > < div class = " row " > < div class = " col-sm-3 col-sm-offset-3 " > ... </ div > </ div > </ div >

The code will create a column of 25% ( .col-sm-3 { width: 25%; } ) width with a left margin of 25%( .col-sm-offset-3 { margin-left: 25%; } ).

Push and pull are especially used when you need a specific column order.

For example this code:

< div class = " container " > < div class = " row " > < div class = " col-sm-7 col-sm-push-5 " > ... </ div > < div class = " col-sm-5 col-sm-pull-7 " > ... </ div > </ div > </ div >

This will create two columns, but, on the page, the second define column will appear first and the first defined will appear second. That happens because of .col-sm-push-5 { left: 41.66666666666667%; } and .col-sm-pull-7 { right: 58.333333333333336%; } .

But why would you want to modify the order of the columns? Imagine that you have a blog and on the right sidebar you have a very important subscribe form. You want that subscribe form to be showed on top of content when you view the site on a mobile phone, so you change that order.

Column clearing helps to clear floats at specific breakpoints.

Let's take the following code:

< div class = " container " > < div class = " row " > < div class = " col-xs-5 col-sm-2 " > .col-xs-5 .col-sm-2 </ div > < div class = " col-xs-7 col-sm-4 " > .col-xs-7 .col-sm-4 </ div > < div class = " clearfix visible-xs " > </ div > < div class = " col-xs-5 col-sm-2 " > .col-xs-5 .col-sm-2 </ div > < div class = " col-xs-7 col-sm-4 " > .col-xs-7 .col-sm-4 </ div > </ div > </ div >

You notice this <div> : <div class="clearfix visible-xs"></div> . This is the part which basically clears the floats on phones through .visible-xs class.

Conclusion

Bootstrap grid system might take a little time to learn and understand, but once you get it you can create great layouts in a short time. We need to take all advantage of all these classes. I've often seen websites based on Bootstrap which only use .col-md-* classes, which it is not the best practice.

I hope that this article will help those who were confused by all these classes and if you have any questions please feel free to ask.