Bootstrap 3 grid system explained

Bootstrap grid system overview

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 files 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. See live example.

bootstrap col xs
.col-xs- behaviour in Bootstrap grid system

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) {...}. See live example.

bootstrap col sm
.col-sm- behaviour in Bootstrap grid system

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) {...}. See live example.

bootstrap col md
.col-md- behaviour in Bootstrap grid system

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) {...}. See live example.

bootstrap col lg
.col-lg- behaviour in Bootstrap grid system

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. See live example.

bootstrap grid system example
Mixed classes in Bootstrap grid system

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

bootstrap css grid
Mixed classes in Bootstrap grid system with stacked columns

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. See live example.

bootstrap grid explained
Nested columns in Bootstrap grid system

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. 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.

19 replies
  1. Trevor Hickey
    Trevor Hickey says:

    Are you sure you can offset on sizes smaller than medium and large devices? I was under the impression that “.col-xs-offset-*” and “.col-sm-offset-*” did not exist, but “.col-md-offset-*” and “.col-lg-offset-*” did.

    Reply
    • Constant Rock
      Constant Rock says:

      Trevor, yes you can offset on sizes smaller than medium and large devices. Remember that .col-xs-offset-* is also percentage based.

      Reply
  2. mp
    mp says:

    your examples are GREAT!! thanks for the effort!!

    Question:

    On the bootstrap site, they have the following example:

    .col-xs-12 .col-sm-6 .col-md-8
    .col-xs-6 .col-md-4

    how can they have col-xs-12 in one column and col-xs-6 in another if your numbers have to equal 12? what am I missing?

    Reply
    • Constant Rock
      Constant Rock says:

      mp, yes, you can make any combinations you want even if the one you wrote it does not have too much sense; if you look more above in my article you will see I also have similar examples, but also show it visually on different devices.

      Reply
  3. Annabelle Lee
    Annabelle Lee says:

    Thank you! After hours of research I found this is the best tutorial on Bootstrap’s new grid system. Your examples have made it so much easier to comprehend. Now I get to keep my sanity!

    Reply
  4. Cipriano
    Cipriano says:

    Thank you very much for putting the time to put this together. It has been a huge leap for me in understanding Bootstrap grids.

    Aloha!

    Reply
  5. Miguel Enriquez
    Miguel Enriquez says:

    Good Explanation.
    But i see others tutorials, ALL tutorials only mention the rows, and the columns?
    How do this:

    Hi Friends how to create this page:
    Grid_12 = 12 columns (by sample)

    in grid_3 = 3 columns, i want put a menu.
    in grid_9 = 9 columns (big area) i pretend put a image.

    exist any tutorial for do this?

    thanks

    Much thanks, beautiful explanation.

    Reply
  6. Bethany
    Bethany says:

    Thank you! Beautiful explanations that are easy to understand! Thank you for taking the time to put together the images. They’re hanging above my desk 🙂

    Reply

Trackbacks & Pingbacks

  1. […] Bootstrap 3 grid system explained – Zen Invader […]

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *