Check out my new project, Practical Service Design!
User Experience at Hello Erik

Bootstrap 3 Grid Introduction

Posted August 19, 2013

IMPORTANT NOTE: Read the NEW Bootstrap 4 “How to use SCSS Mixins” post here.

After over 9-months of work, Bootstrap 3 is here. It introduces a new way of thinking on how the responsive grid works, when it is best applied, and how the styled elements within the breakpoints work as well. About a month ago, I decided I wanted to jump onboard right away, so I built a new blog theme with it (the one you’re seeing) and learned quite a bit more than I assumed I would. That’s what this post is about, sharing what I came to realize. So here’s a little guide, tutorial, and set of some examples to get you started.

Bootstrap 2’s grid was very straight forward. If you were using the fixed width containers, there was a normal, large, tablet, and mobile size. The base styles were all written within the context of the “desktop” width. Mobile styles were applied after through the responsive stylesheet. Compared to v3, it was very limited in out-of-the-box mobile convenience.

Bootstrap 3 has been heavily publicized as being mobile first. There’s been a design movement in the last year or two for “designing” mobile first, where you take your concepts and UX and plan it from the mobile perspective first, i.e. your interactions, wireframes, mockups, etc were all designed initially for the mobile experience. Bootstrap 3 has adopted that idea and built the framework on the idea that your base CSS and html should be from a mobile perspective by default.

Update 8/25/13: There’s been some questions around the ‘net about 100% width sites, “liquid” as we called it in the 90’s. I have added a section for that, click here to jump to it.

Update 9/27/13: If you like this article, be sure to read the Part 2 about a Bootstrap Less workflow here Bootstrap 3 Less Workflow Tutorial and the Subtle Magic Behind Why the Bootstrap 3 Grid Works.

Mobile First CSS

Great. So what does this actually *mean* if I’ve never done this before? Well, let’s just jump to a very simple example. Say you have an h1 tag at the top of your site. You design it up and check it out in your browser – looks great. Then you shrink it down to a mobile width, and the font is way too big! Here’s the thinking behind mobile first: Bootstrap expects that the styles you applied to the h1 are appropriate for the *mobile* widths. So if you chose your font size, padding, margin etc, at the desktop size, that will probably be way off at the mobile size.

Here’s an example of this:

That is how you wanted it to look on the desktop, a nice big 40px font. But at a mobile size, it’s too big and the padding is too large. How would you have to do it with a mobile first CSS framework? Like this:

See, the actual base style is the mobile style. Anything that you wanted changed at the next larger size is encapsulated in the @screen-tablet media query. Our font is sized at 22px by default, but at the desktop size it is at 40px. And, you can see that I didn’t need a margin-left on the base style, but I did add one in on the @screen-tablet breakpoint size, so it only applies when you’re past that min-width.

The Grid’s Basic Markup

For the markup that goes into your HTML, there are big changes. There are now 4 different grid classes you can use to define your layouts. This is where if you haven’t worked with a framework like this before, or you are accustomed to Bootstrap v2, it is a new way of looking at it. There are now 4 column size class variants:

  • col-xs-*
  • col-sm-*
  • col-md-*
  • col-lg-*

Now, before you panic and think “I have to write 3-4-5 freaking styles for every class I make?!” Probably not. Most of the time, the styles work fine at all the sizes, especially at the tablet and larger sizes. It’s only when you see specific needs at the larger sizes that you have to add in the adjustments. It is a small amount of time added, but:

  1. It’s way better than the old way of having whole mobile stylesheets and a “desktop first” CSS base.
  2. Once you get used to it, the flexibility and power will allay any doubts.

The premise is that the grid is controlled by the viewport size via the media queries and that as the browser width gets wider, the different column class will overwrite the previous. So at the phone width, the “xs (extra small)” column is active. But if you stretch your browser out wide, then the “lg (large)” class is active and overwrites the smaller sizes. If you’re confused, hang on and keep reading. This is a whole new Bootstrap paradigm. Instead of the elastic band approach of Bootstrap 2, v3 gives you now incremental control at each breakpoint.

Useful right? No? Don’t know? Let’s keep going!

Example 1 – Basic Single Columns

I am going to try and make these explanations as dead simple as possible. You have 2 divs you want to be each 50% of the total container

Now, in Bootstrap 2, we would have used the class .span6 for both. This would have given us the 50%/50% split at the tablet and up sizes, and then it would snap to the 100% width columns at the mobile breakpoint. Not so in Bootstrap 3. Since this is a mobile first framework, all of the base columns are assumed to be 100% width, stacked vertically. Huh? So in the example above, if you wanted these 2 divs to be 50%/50%, you would FIRST have to decide at which breakpoints. If you say “I want them to be 50%/50% down to the desktop size, but not tablet or phone”, it would be written like this:

This says “Make me a 6 column at the medium size and up.” Anything smaller than medium, it goes back to the 100% width stacked layout. This is mobile first, everything assumes that you are designing for a mobile, extra small viewport. So, let’s say you want it to be a 50%/50% split all the way down to the smallest phone width, no matter what. You use a different class for that, one that says “keep me as a 50% column all the way down to the phone size.”  You would use the new “xs” extra small class:

This basically says “keep me at a 6 column width all the way down to the phone size, don’t ever switch me to the stacked mobile layout.” That means on a phone, it will still be a 50%/50% split on the columns since you used the specific col-xs-6 class. To take it the other direction, say you want to have the same divs be 50%/50% at the largest snapping point, and ONLY at that point. It’s just as easy:

That tells it to apply the “6 column” size at only the large size and up. As soon as you hit the break point going narrower, it will again assume that it’s a mobile design and take it to 100% width. I have made examples pages for this post, so Example 1 is demonstrating this most basic concept.

Mixed Width Columns

Now we have seen the basics of how the html markup classes work. But lets go deeper. Let’s use our 2 divs again and let’s give them the 50%/50% split at the medium viewport width:

Now, here’s where it’s new. Let’s say that you want it 50/50 at medium, but at large your design could really be better as a 33%/66%. So what we’re going to do is set it up to change the column widths at the breakpoint:

Does that make sense? Bootstrap is going to say “at the medium size, I look at classes with ‘md’ in them and use those. At the large size, I look at classes with the word ‘lg’ in them and use those.” In this case, our 2 divs will go from a 50%/50% split and then up to a 33%/66%. Just like that. This can be taken to another level, where we want to change it for the extra small phone size as well. Say we want to add the option for the columns to be split 25%/75% for tablets, we go like this:

Now this gives us 3 different column layouts at each point. On a phone, it will be 25% on the left, and 75% on the right. On a tablet, it will be 50%/50% again, and on a large viewport, it will be 33%/66%. 3 different layouts for each of the 3 responsive sizes! Check it out in example 2:

But, I know what some of you are thinking; that’s a lot of markup in your HTML, you could possibly use up to 4 different classes just for the grid. Some people mind that, some don’t. But there’s an answer to that too: mixins.

Mixin

Bootstrap 2 was set up to create columns from mixins, and v3 takes it even further. You can create your rows and columns purely from mixins and leave any grid markup out of your HTML. There are 2 basic mixin types for creating the grid:

  • .make-row();
  • .make-xs/sm/md/lg-column();

You use these mixins inside of elements that you want to serve those purposes. Here’s an example where I have a single div left-and-right that I want to be the row, and then left and right to be the columns inside:

Without grid column classes, these divs will just assume the default behavior of block level elements. Since we want to use the grid, but don’t want to use any markup, we’ll create the row and columns using mixins, (using Less, of course). Using the HTML above, a block of Less could look like this:

That will add to those classes the properties of the col-md-6 that would go in the HTML otherwise. Using the mixins, you don’t have to include any markup in the HTML.

Going back to example 2 of multiple, different breakpoints on an element, you can do that with the mixins too. Once you know how you want the layout at each responsive size, you just add the column mixins within each media query. Here’s an example with mixins for all 4 layout sizes:

This changes the column widths of .left and .right at each layout. In this wacky example, the side by side .left and .right would be jumping around pretty drastically, but the effect is clearly visible here in example three:

Pull/Push/offset

In both the HTML class and mixin method, offsets and pull/push work in the same way. You can include them as classes right in the markup, or dynamically include them as mixins. One difference between using the HTML markup and the mixins is that if you use the HTML method, at the tablet width the offsets are disabled and don’t change the layout in any way. If you want offsets to be in effect at tablets widths, you can include them as mixins. I am not quite sure why there is this difference, but there is.

With the pull/push abilities, you can easily flip where columns are positioned, moving them left or right at different breakpoints, which also can let them move up/down on full mobile view. It adds a lot of possibilities on top of an already powerful grid system.

Update: Full Width Fluid Containers

If you want to have a site that is the full width of the browser at all times, and “fluid”, you will have to make your own container class. It’s very easy. Since Bootstrap 3 is mobile first, the default state is the single column mobile width. So if you want everything bigger to function as just 1 responsive “100% fluid” width, you make a new container class and wrap your rows in it. Here’s an example:

That should do it. I haven’t done extensive testing on this, but from the testing I did it does seem to work. All this does is take Bootstrap’s looking for .container and remove the media queries that set the widths. If you want to see it, it is at the bottom of Bootstrap’s variables.less:

What you’re doing is just removing those set pixel values. And by adding back in the padding, you make sure that nothing touches the edges. The narrowest mobile size doesn’t need a fixed width since it’s always 100%, so you don’t have to set anything special for that.

There are some other techniques for putting fixed/responsive containers inside of liquid containers, and maybe I’ll come back to that if people care. Typically this comes into play if you’re doing something where you want a fixed-width sidebar for a nav or something, and then the rest of the right-side of the browser is fluid. This isn’t really a Bootstrap thing though, as much as it is putting Bootstrap inside of an outer scaffolding. I’ve done it before, and it’s cool, just takes some reworking of how Bootstrap sees the media query snap points, since it’s looking for viewport widths, but you’ve added things that push Bootstrap in either direction, so you have to account for that and add it to the media query… (this is another blog post topic).

Be warned – the various column sizes will still respond to the viewport width on when they change to the mobile view. You’ll have to decide how you want to do that. If you just want it to be simple and liquid, just use .col-sm-* for everything. Check it out in Example 4:

If you encounter any weirdness with this, post in the comments below.

Using Both Responsive Class Attributes and Mixin Columns

Taking everything we’ve learned so far, we can leverage both the CSS responsive attributes and the column mixins to basically do anything we want. This is closer to how an exaggerated real world implementation might look:

This essentially would let you have an entirely different layout at each responsive width, both in the grid and the styles altogether, and it’s not that much work to write in the Less. And as a bonus, by using the column mixins you don’t need to change anything in your HTML if you’ve already got it how you want it.

One of the things you have to get used to remembering is that the styles now cascade “up and out” from the base mobile CSS. Even though you can just design for the desktop view like normal, you will then have to basically “port up” the CSS from mobile widths and move the desktop styles into the right media query, and then fix/replace the styles at the base level. This isn’t a problem if you don’t care about how perfect things are at mobile widths. If you do want your site to be a great mobile experience, keep 2 browser windows open – one at the desktop width, and one at mobile. That way you can at least see when something is terribly out of place in either view.

Give em’ the boot!

Bootstrap 3 moves the whole paradigm of mobile first CSS forward, and makes it more accessible to the people who may have never done mobile first before. It’s more dynamic, flexible, and in the end I think will be easier to use.

All in all, I am very excited to use Bootstrap 3. I was a huge fan of v2, and v3 is such a step forward it’s hard not to marvel at the work that the @twbootstrap guys (@md0, @fat) and Github contributors have put into this.

Go get Bootstrap now and give it a try! If you have any comments, questions, want some help, have ideas or anything else, post in the Disqus thread below.

Like this article? Read the Part 2 about a Bootstrap Less workflow here Bootstrap 3 Less Workflow Tutorial and  the Subtle Magic Behind Why the Bootstrap 3 Grid Works.

Examples:

(As updates are made to Bootstrap 3, or my examples need refining, I’ll be updating this article and noting where I’ve done so)

 

Update 8/25/13: Added a section on making a 100% liquid container here.

I love all things experience design. I work as a Principal Service Experience Designer at Intuit in Mountain View, CA.

164 Responses

  1. jpolacek
    jpolacek August 20, 2013 at 4:11 am |

    People might flip out at first about putting all those classes in there, but it works great for tricky layouts. Extra Strength Responsive Grids uses basically the same approach. http://dfcb.github.io/extra-strength-responsive-grids/

    Once you get used to it, the grid classes makes it easy to look at the markup, see whats going on and move things around any way you choose.

  2. Carlos H. Romano
    Carlos H. Romano August 20, 2013 at 5:03 am |

    I think where you wrote “col-med-6” is actually “col-md-6”? Thanks for the article btw!

  3. codescaling | Bootstrap 3 – The strap is rebooted

    […] While people, including myself, have been enjoying Bootstrap 2, the developers have spent the last 9 months working on Bootstrap 3 and today they have announced that it is ready for prime time. Now, the big change is in design philosophy; Bootstrap 3 is “mobile first” which means that rather than having base styles for desktop displays and styling them down into tablets and mobiles, the base styles are for tablet/mobile devices and are styled up for desktop displays. The effect this has on the grid model is explained by Erik Flowers in his blog post “Bootstrap 3 Grid Introduction“. […]

  4. Rick
    Rick August 20, 2013 at 5:32 am |

    Is there any performance related issues with many media queries in every class vs 1 big media query that contains adjustments for all classes? Obviously the code reads much better with the media query inside the class

  5. Erik Flowers
    Erik Flowers August 20, 2013 at 6:55 am |

    I did, I’ve changed that. I’ve been working on this for a few days and didn’t know the first release was hitting yesterday, so I tried to wrap it all up last night and was pretty zoned out!

  6. Christian Hansen
    Christian Hansen August 20, 2013 at 7:09 am |

    Great article!

    Another typo: in the section: “Example 1 – Basic Single Columns” you seem to have switched left/right div names in the last two snippets.

  7. Erik Flowers
    Erik Flowers August 20, 2013 at 7:17 am |

    With Bootstrap 2, I think a lot of people went with an add-on “responsive” stylesheet where the necessary classes were just redone there. It can be done here too, but I’m not really an expert on the fine details of browser performance on CSS. For me, using a lot of mixins and variables in Less like I do, I would much rather keep things in context and just add what is needed right there. Maybe someone will test it and share results, I honestly don’t know the impact that inline media queries have. It was a new concept to me, and i couldn’t believe I had been piecing together a separate responsive stylesheet and maintaing consistency between both.

  8. Erik Flowers
    Erik Flowers August 20, 2013 at 8:05 am |

    Also, in case it wasn’t clear – this is a WordPress theme I built in Bootstrap 3 RC1 over the last 3 weeks or so… need to updated it today to the final release Less!

  9. iweczek
    iweczek August 20, 2013 at 10:16 am |

    Is it possible to download your WordPress Bootstrap Theme?

  10. Andrew Ma
    Andrew Ma August 20, 2013 at 10:31 am |

    Are you planning to share the theme out on github or something?

  11. Erik Flowers
    Erik Flowers August 20, 2013 at 10:35 am |

    I was thinking about it. It’s not ready for “general use” right now as it’s “bare minumum” custom to get it published right around Bootstrap 3’s release. But I definitely am planning on trying to make it a “releasable” theme.

    I have never done a publicly available theme before, and I am using Justin Tadlock’s hybrid-base as the PHP (I couldn’t do PHP if I tried…), which is awesome. There are some odd things I will have to work out, like how to make the nav dropdowns work with how bootstrap spawns them, so maybe I will enlist the help of a wordpress theme PHP badass.

    I do want to release it though. Not so much as a Bootstrap 3 “base” theme, but as something with a bit of style. I am guessing someone like Konstantit (http://wordpress.org/themes/the-bootstrap) will be updating his?? But maybe not.

    Either way, yeah I’d love to make a generic version of my finished “design” available. Plus, with Tadlock’s PHP framework, it’s super super easy to modify the layouts anyways.

  12. Erik Flowers
    Erik Flowers August 20, 2013 at 10:35 am |

    See response below (above?)

  13. Brent Jones
    Brent Jones August 21, 2013 at 8:14 am |

    I’m confused about the -15 left/right margin on the row class. In Bootstrap 2, I could use a container class on a div and it might have a border and within that div have a row class (.row-fluid then) to contain the div’s on one row within. Now if I do this, it pushes outside the container. If you view this blog in firebug, you can see what I am trying to describe.

  14. Erik Flowers
    Erik Flowers August 21, 2013 at 8:48 am |

    Can you post an example or a link to it? Or tell me exactly the html/css to recreate it?

    There is no more fluid-row, it’s all fluid by % now. You can do a full-browser fluid container, but that’s not what your asking.

    The row uses a -15px margin because the .container uses a 15px padding. Well, this is because for a day or 2 during the RC2, the body had a 15px padding, but then non-container divs that you wanted full width of the browser were contained in that 15px body padding, and then those containers needed the negative margin. So I posted that as an issue on github, and @mdo was right on top of it. He changed it to how it is now, with the body having no padding and the containers having the padding. And then the rows needing negative margin to be “flush to the edges” of the container.

    Now, why is THIS. Well, since the container can’t have a margin outside it, since that would interfere with where the responsive snap points are, it uses the negative padding. If you watch right before a snap point, you’ll see that there’s 15px of space, and then it snaps. Well, since the margin can be OUTSIDE the container, it’s actually the ROW margin, that is negative, that gives the container the space on the sides so there’s that 15px of space around the container.

    I think what you may be seeing is that Bootstrap now uses border box like this:

    *,
    *:before,
    *:after {
    .box-sizing(border-box);
    }

    See: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

    This puts borders inside the containers, not outside like Bootstrap 2. So while you could put a border on a container and it would not affect the contents, now it does.

    I’d probably avoid putting border/padding/margin additions on the actual grid scaffolding. The grid should probably be used just for structure. I know there are cases when it won’t hurt it, but I think this is what you’re referring to.

    If in fact you are referring to seeing the row margins stick out of the container – yes, that is how it’s supposed to be. Does this at least make sense? What do you think?

  15. Erik Flowers
    Erik Flowers August 21, 2013 at 8:52 am |

    Also – border-box may have nothing to do with your question. But I think the rest does.

  16. Brent Jones
    Brent Jones August 21, 2013 at 1:37 pm |

    I was refering to how the row margins stick out of the container but this explanation makes sense. Thanks Erik.

  17. Links & reads for 2013 Week 34 | Martin's Weekly Curations

    […] Bootstrap 3 Grid Introduction […]

  18. Log Review #1 ( HTML CSS jQuery Laravel Tutorial AngularJS ) » Starck Lin

    […] Tutorial – Bootstrap 3 Grid Introduction […]

  19. Kate
    Kate August 27, 2013 at 1:02 pm |

    Thank you, thank you thank you!

  20. Ole Fredrik Lie
    Ole Fredrik Lie August 28, 2013 at 1:29 am |

    Well written article with good examples! Thank you! :)

  21. Irina
    Irina August 28, 2013 at 3:05 am |

    Thanks for the great article!
    In Example 3 (mixins for all 4 layout sizes) @screen-large-desktop mixin name has changed to @screen-lg-desktop.

  22. Erik Flowers
    Erik Flowers August 28, 2013 at 8:51 am |

    Yeah, watching the Github repo, they are still making changes to names like that. I am going to fix this for now, and I’ll fix it again at the 3.1 I believe. I thiiiink they’re changing everything to the 2 letter names, even the media queries like @screen-md instead of @screen-desktop etc.

  23. rahul patwa
    rahul patwa September 2, 2013 at 8:39 am |

    This is the best tutorial I have found on bootstrap 3.. I was quite confused about using the 4 different grid classes.. Which is not properly explained in the formal documentation as well.
    Thanks a lot !! Keep ’em coming!

  24. Tim Osborn
    Tim Osborn September 5, 2013 at 6:02 pm |

    great article! thanks

    I’m interested to see how you put your media queries inside the relevant class – I like it! I’ve tended to herd all my media queries up, which can get confusing! I think I got this from the boilerplate approach, where there is (was?) one file for each breakpoint..

  25. Erik Flowers
    Erik Flowers September 6, 2013 at 9:55 am |

    That used to be how Bootstrap 2 and some others worked, since it wasn’t mobile first. And you can still do it that way. I just prefer to design it out how I want it, mostly mobile but sometimes I just design with desktop in mind and fix the mobile stuff later, but I find that just mixing in the mobile styles into the class is so much more logical to how my mind works.

    I don’t know what it does to CSS performance. Maybe nothing since it’s still the same amount of code and effect, but maybe on super trafficked sites it matters, but I don’t have any way of knowing that myself as I don’t have any access to a site of that scale =D

  26. Tim Osborn
    Tim Osborn September 7, 2013 at 7:16 am |

    I was interested in the same – found the following on SO:

    “…based on the tests below the performance impact seems to be minimal. The test shows the rendering times for an example page with 2000 separate and combined media queries, respectively… The main benefit seems to be in file size more than anything else…”

    http://stackoverflow.com/a/15643765/2586761

  27. Rick
    Rick September 7, 2013 at 8:52 am |

    Thanks for the link Tim, good to know!

  28. Paolo Limoncelli
    Paolo Limoncelli September 10, 2013 at 2:47 am |

    Hi! Great hints.
    I’ve found in BS 3.0 that if the padding values are set to 0 the viewport shows a horizontal scrollbar, so something overflows horizontally, but I wasn’t able to find what element…

    This is the class

    .fluid-container-fullWidth {

    padding-left: 0px;
    padding-right: 0px;
    margin-left: auto;
    margin-right: auto;

    }

  29. Erik Flowers
    Erik Flowers September 10, 2013 at 8:26 am |

    you can’t change the left/right padding of a container element – it has to be 15px.

    Then, you also can’t change the left/right MARGIN of a row element – it has to be -15px.

    The padding on the container is what gives it space around the content, and the negative margins on the rows is what allows the content to touch the edge of the container.

    What you’re seeing is that with those values set to 0px, the row overhang is what makes the content wider than the view, and you get the horizontal scrolling.

    If you have a need to do what you’re doing above, try wrapping the bootstrap .container in another div, allowing the bootstrap container/row to behave as they need.

  30. Paolo Limoncelli
    Paolo Limoncelli September 10, 2013 at 2:34 pm |

    As I imagined… Thank you!

  31. David
    David September 12, 2013 at 11:56 pm |

    why the http://getbootstrap.com/css/#grid-example-mixed-complete

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

    why the first sub div need to set 12? according to this blog, could remove col-xs-12

  32. Erik Flowers
    Erik Flowers September 13, 2013 at 11:41 am |

    You could. Every mobile column is a “12” since it’s just 100%, so there’s no real point. It might be just to illustrate that you can do an col-xs-* of a certain size, so you can visually see it in the doc. Or maybe the doc just needs proofed again, do a pull request on github to remove it =D

  33. hassan jamal
    hassan jamal September 15, 2013 at 12:04 am |
  34. hassan jamal
    hassan jamal September 15, 2013 at 2:38 pm |

    1st row we see that there are two column

    col-md-8 and col-md-4 . if we add digit of these two column we have 12 . Bootstrap 3 allows this up-to maximum number of 12 only . So if viewport size is >= 992 px then column will have Medium Size definition and since sum it 12 , These two column will horizontally stacked .

    Now We have another Baseline set for our page that if resolution < 768 px then change column definition and 1st column will have a width of 12 (.col-xs-12) and second column will have a width of 6 (.col-xs-6). Since first column will occupy whole space horizontally second column will be pushed down. I have video attached for illustration.

    http://limestrap.blogspot.in/2013/09/212-bootstrap3-grid-with-sublime-text.html

  35. David
    David September 15, 2013 at 6:53 pm |

    Thanks very much for explanation

  36. David
    David September 15, 2013 at 7:00 pm |

    Thanks, could don’t set the first column, just set the 2nd one?

  37. Erik Flowers
    Erik Flowers September 15, 2013 at 7:01 pm |

    There is no real reason to use col-xs-12. It has no properties that matter.

    I am not sure why it’s in the docs. Maybe I should do a pull request to take it out =D

  38. Florencia Coppola
    Florencia Coppola September 17, 2013 at 2:16 pm |

    A very good starting point. I also recommend reading this article to make the web better:http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html

  39. Rajib Paudyal
    Rajib Paudyal September 24, 2013 at 2:17 am |

    Very well written article with nice explanations and example, I really enjoyed reading your post. Specially about using multi col-*-* classes, it was confusing me a lot.

  40. Guest
    Guest September 24, 2013 at 2:23 am |

    So, you are advertising your own blog saying nice ? Not bad, but please use your own creativity and Post your own post instead of copying contents from all around the internet without giving proper credit… and its a shame to promote such content saying its your own.

    Shame on you

  41. hassan jamal
    hassan jamal September 24, 2013 at 2:38 am |

    Thanks for such a nice reply.
    I think there is only one law of motion given by Sir Newton. But you will find it in every physics book. Its completely your perception how you take it.
    Once again thanks a lot

  42. alex
    alex September 24, 2013 at 5:06 am |

    owesome!!!

  43. Bootstrap 3, quoi de neuf? | Onasus
    Bootstrap 3, quoi de neuf? | Onasus September 25, 2013 at 1:37 pm |
  44. Bootstrap 3 Less Workflow Tutorial | UX at Hello Erik

    […] is another huge reason to use less. In my post about the Bootstrap 3 Grid Introduction Tutorial, I talk about how you can build the grid using just Less mixins and media queries. If you’re […]

  45. Sebastian
    Sebastian September 27, 2013 at 7:18 am |

    Hi, nice tutorial!
    I´ve one question: With bootstrap 3 we can make the first design change at 720px, maybe this is great with the new resolution on devices, but i live in Uruguay, here everything cost 3 times more, and i need to point old smartphones with less resolution, it´s seems to me excesive width for first breakpoint 720, y would like to target too 480 – 720. I try to configurate Media queries breakpoints in Bootstrap config but get size errors… thanks for any solution here.

    P.D: there is no reason to put col-xs-12 , it´s the default size.

  46. Erik Flowers
    Erik Flowers September 27, 2013 at 10:33 am |

    Thanks, I removed the col-xs-12 thing. That was from when I wrote this about RC1.

    With your question, with the breakpoint at 720px, that will make it the narrow mobile size at everything below that. I presume that your problem isn’t that you DON’T want phones with larger screens to see the mobile view.

    Are you saying you want to move the breakpoint from 720px to like 480px? So that it stays as a regular “grid” at the sm: size until you hit 480px?

    Or are you saying you want a 5th media query range – in which case, that would be very difficult. Changing where the final breakpoint is is easy though. I’ll post how in a new comment. But if you can answer my questions or explain more, that would be great.

  47. Bootstrap 3.0 | אמנות המסך
    Bootstrap 3.0 | אמנות המסך September 28, 2013 at 4:31 pm |
  48. Steve Fort
    Steve Fort October 1, 2013 at 11:06 pm |

    Finally I got the link from where I can start develop the bootstrap theme. Thanks.. :). Great explanation.

    http://www.infobizzs.com

  49. Chu Quang Tú
    Chu Quang Tú October 3, 2013 at 2:51 am |

    Very nice article. Thank you for for a great starting point to get more clear with BS3 New Grid System. But I’m really appriciated if you could bring us more complex layout by using the new grid system of BS3 ? It would be more clear for begginer like me to understand how they work.

  50. Mokviper
    Mokviper October 3, 2013 at 2:11 pm |

    Thanks for the article. I believe working with Boostrap 3 in SCSS much easier rather than normal css.

  51. Nigel
    Nigel October 7, 2013 at 1:52 am |

    Great article Erik. As you sound like you know what you’re talking about, any chance you could help offer some guidance on a question I have about grids? I’ve posed my question over at stackoverflow if you want to check it out http://stackoverflow.com/questions/19155528/bootstrap-3-nested-grid-not-reset-to-12 – I’m just starting to introduce this at work and want to make sure we get off on the right foot. Thanks,

  52. Erik Flowers
    Erik Flowers October 7, 2013 at 9:58 am |

    It looks like you answered your own question on SO, but I might have done it different. I am not totally sure what you were trying though.

    Basically, you essentially have 2 columns under the header. You could have done a sm-4 and sm-8, then push/pulled those to be flipped, and then inside the 8 did new rows that you could use the 12-col layout again, and instead of 4/4, do a 6/6 and just divide things by the 12 col layout.

    Here is a fiddle of it: http://jsfiddle.net/Yjn9V/1/

    This does change your bottom row where it’s a 5/2/5, since 12 and 8 don’t have the same divisions, but maybe you can mess with that?

    Thanks for commenting, it was fun to replicate this design. If you have questions on what I did, post them here =)

  53. Nigel
    Nigel October 8, 2013 at 3:01 am |

    Always more than ne way to skin a cat huh? 😊
    I wonder, though, if you were to start nesting more rows inside a column – starting a new 12 grid – wouldn’t that make the new grid slightly different from what the designer was originally working from?

  54. Erik Flowers
    Erik Flowers October 8, 2013 at 7:32 am |

    I’d have to see the design to know why it has to be a certain way. Really the number of columns are just there for easy reference, but they’re based on percents, so a 6 is just 50%, so 50% of 8 or 50% of 12 is the same thing.

    The only difference I see is if you want to do something that isn’t divisible by 12 at all, like in the original example I think you had it going the full width as 4/2/4, which wouldn’t work in a 12 column set up.

    That being said – the designer should pick a grid and stick to it =D

  55. Claudio Álvarez
    Claudio Álvarez October 9, 2013 at 7:58 am |

    Very clear explanation, thank you for this post!

  56. Janusch
    Janusch October 11, 2013 at 12:22 am |

    Thanks Erik, for the great tutorial. I would really love to gain some more insights on customizing bootstrap 3 to ones own needs, especially when it comes to fixed sidebars and fixed table headers.

    You wrote this: “There are some other techniques for putting fixed/responsive containers inside of liquid containers, and maybe I’ll come back to that if people care.”

    And i just wanted to say that we totally care! Maybe you could point out some resources on BS3 that go beyond the basic use of it, and where bootstrap is customized to specific needs, or is BS the wrong framework for it? Like the saying “If you have to fight with a framework, you are probably doing something wrong and not folowing the conventions” Can BS be used for left and right fixed sidebar? With a container that is larger than 1140px? Is there a way to make table headers not break, when the .affix kicks in?

    Would be lovely if you find the time to respond!

    Thanks again for the great intro!

  57. David Andersson
    David Andersson October 17, 2013 at 1:14 am |

    What a great article! Im new to bootstrap, just got one site in under 2.3.2 and then 3 came along and changed everything. Your work here helped me to understand alot, now it´s just up to me to practice and practice some more :)

    Thanks E!

    Dave

  58. pezzab
    pezzab October 21, 2013 at 3:32 am |

    This is a terrific post, thank you Erik! I’ve been working on my own WordPress/Twitter Bootstrap workflow for a while now. This has just made my recent transition from BS 2 to 3 a 100 x easier.

  59. gumaflux
    gumaflux October 23, 2013 at 6:59 am |

    Great articles Erik! Excellent quick-start workflow for newbies (like me)

  60. Paul
    Paul October 29, 2013 at 6:52 am |

    I was totally mystified as to how the new grid classes worked until I read your tutorial. Thanks!

  61. hunzaboy
    hunzaboy November 3, 2013 at 1:42 am |

    Thanks alot!

  62. The Subtle Magic Behind Why the Bootstrap 3 Grid Works | UX at Hello Erik

    […] The Bootstrap 3 Grid Introduction and Bootstrap 3 Less Tutorial Workflow […]

  63. Sean Ryan
    Sean Ryan November 11, 2013 at 12:58 pm |

    I am fairly skilled with BS, including v3, but I am not sure what the “bootstrap” way is for this issue:

    I have a page that is basically the following:

    BLOCK LEVEL ELEMENTS W/ CONTENT

    BLOCK LEVEL ELEMENTS W/ CONTENT

    Now, the page will appear the exact same way if I remove the .row and .col-xs-12 divs. So, the question becomes…should I? Do I leave in the unnecessary divs just to be consistent with other pages that are using a more complicated grid? Or should I cut out as much code fat as possible?

  64. Erik Flowers
    Erik Flowers November 11, 2013 at 1:12 pm |

    I am not really an advocate of cutting HTML like this where philosophically it does cut bytes, but realistically it has no effect, you’re saving what, 100 bytes?

    This won’t work with future-compatibility if you ever want to change any responsible styling to it. But you’re right, there isn’t really much of an affect.

    Columns do add:

    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;

    to each element, and rows add the container for adding clears inside of it.

    I can say, that not using the rows and columns do change where the actual bounding box of the columns are, as bootstrap uses the border-box ability, so you end up with your plain divs having a 15px difference on each side as to where borders etc will line up as you can see in this jsfiddle: http://jsfiddle.net/helloerik/Xrpxv/11/. So if you do run into a case where you’re doing something to the box model, it’s going to be different for the naked div content and the bootstrap content. This may not matter though.

    Might also want to look at this: http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works. This isn’t really something I think has a clear better way, because once you start designing and in the future, if any weirdness does show up you’ll see it right away.

  65. Antonio Brandao
    Antonio Brandao November 14, 2013 at 11:28 am |

    In a client’s Nokia Lumia 920, the “Desktop” breakpoint’s layout is shown, instead of the small one. Why is this? Is Bootstrap 3 handling pixel density in Android and iOS but not on Windows Mobile? Any ideas? (Windows Phone 8 GDR2 with IE, WXGA (1280 x 768), 332 ppi, Aspect ratio: 15:9, Display size: 4.5″)

  66. Mukesh
    Mukesh November 16, 2013 at 12:22 am |

    Mind blowing tutorial Erik.

    could you please tell me how to use @media query for mobile device. i am using this(TBS 3.0) with wordpress for my new project. every thing is fine but media query is not working why ? i don’t know . i dont know much about less.

    i have used the following code:-
    (1)
    .container .jumbotron {
    background: none repeat scroll 0 0 #A6111A;

    @media (max-width: @screen-xs-max)
    {
    background: none repeat scroll 0 0 #000000;
    }
    }

    (2)

    @media(max-width:320px){ .container .jumbotron { background: none repeat scroll 0 0 #000000; }}

    (3)

    @media (max-width: @screen-xs-max) {.container .jumbotron { background: none repeat scroll 0 0 #000000; } }

    Thanks

  67. Jon Crowell
    Jon Crowell November 16, 2013 at 1:20 pm |

    For me the biggest nuisance is the navbar – I would like one that doesn’t switch to a vertical layout even when viewed on a phone, but that seems to mean recompiling bootstrap using LESS.

  68. Erik Flowers
    Erik Flowers November 16, 2013 at 1:22 pm |

    You’re looking at it backwards. Compiling bootstrap from less combined with your own custom less is by far preferrable. Compiling Less takes maybe .0002 seconds.

    npm install less
    lessc your.css your.less

    Boom

  69. Erik Flowers
    Erik Flowers November 16, 2013 at 1:23 pm |

    Are you compiling this through Less and using the Bootstrap less? This code isn’t even close to right, so if you’re using a Less workflow, we could fix it up. But I need to know how you’re building.

    If you wanted to use the Less, I am presuming you’d want this:

    .container .jumbotron {
    background: none repeat scroll 0 0 #A6111A;
    @media(min-width: @screen-tablet) {
    background: none repeat scroll 0 0 #000000;
    }
    }

    That is the correct media query syntax using the right variable. This would turn on that rule at everything but the phone width.

  70. Erik Flowers
    Erik Flowers November 16, 2013 at 1:27 pm |

    I’ve never heard of this before, an interesting problem. I will look in to it. I don’t have a device to test it on so I might have to look around. The CSS just uses the viewport width, has nothing to do with bootstrap. Can you try out some other responsive frameworks and see if it is the same?

  71. Erik Flowers
    Erik Flowers November 16, 2013 at 1:33 pm |
  72. Antonio Brandao
    Antonio Brandao November 18, 2013 at 10:26 am |

    Thanks Erik, that seems to point me in the right direction. I will look into it and will let you know if I find a definitive answer. Thanks again!

  73. Vino
    Vino December 2, 2013 at 7:50 pm |

    please tell me the best way/approach as a visual designer using the grid to go from mobile to desktop design. Attached is your templates.

    The website was created for bootstrap 1170. It fits right in the template. When I did a screen shot on my iPhone 5 I placed it in the 750 centered.

    If I was designing for mobile first (iPhone 5 for us) would I use the 750 and pretend the extra space 750px don’t exist and work within the grid you have but at 640px?

    If designing for a tablet going from mobile I am guessing we would use the retina version? How would we approach a 2048-by-1536 iPad air design with your templates? Any direction best approach would help.

    Thank you

  74. Erik Flowers
    Erik Flowers December 3, 2013 at 11:32 am |

    You can’t really do responsive, mobile-first design by doing it in mockups first. The best way is to get a general visual theme, and build it in HTML at the same time as you do mockups. Eventually you should mostly be using the HTML to see how things go and adding to that.

    You can set up 4 different designs at http://www.minimit.com/articles/web-related/bootstrap-3-grid-psd-templates using those templates in photoshop, and do a mockup for each size. But, why would you need 3 different designs for the dekstop versions? Usually you just do a mobile design, and a desktop, and expect the desktop design to be a little responsive to the width, but you shouldn’t really need to design all the sizes.

    Also, ipads just render the site as the tablet/desktop size. The resolution of the iPad doesn’t matter. iPads will show the “sm” bootstrap grid.

    Honestly, you can’t really do what you want without designing in HTML at the same time. There’s no real good way to do responsive designs in a non-responsive fashion. Does that help? At least try those PSD’s in the link above and how your design could fit into each.

  75. Bootstrap 3 | rgbskills - developer_is(Benko Zoltan)

    […] best introduction I could find is this Its very detailed and straight to the point, thank you […]

  76. Vincent Cordel
    Vincent Cordel December 19, 2013 at 2:23 pm |

    I’m confused what to use in the mixing to push or pull a div.

    It works fine in the html but I tried a bunch of code in the mixin without much results.

    Could you please guide me? :)

  77. Vincent Cordel
    Vincent Cordel December 20, 2013 at 7:49 am |

    Hi Erik,

    Say you have 2 columns 33%-66% and I’d like in the tablet the order to be reversed (L->R, R->L) with a push-pull.

    I suppose this is done with the mixin .make-grid but I don’t understand the format of it.

    Could you please provide us with a mixing example for a pull/push?

    Thanks again!
    – V

  78. Erik Flowers
    Erik Flowers December 20, 2013 at 9:48 am |

    I thought I replied to this but it must have gotten lost. The mixin is:

    .make-sm-column-push(NUMBER)

  79. Erik Flowers
    Erik Flowers December 20, 2013 at 9:52 am |

    Here is a fiddle in action: http://jsfiddle.net/Q6VYq/94/

    The code is:

    66%
    33%

    You can just convert that to mixins if you want like:

    .cola {
    .make-sm-column(8);
    .make-md-column-push(4);
    }

    .colb {
    .make-sm-column(4);
    .make-md-column-pull(8);
    }

    The mixin make-grid has nothing to do with it. It is as simple as above. Declare the column sizes, then declare the push/pull, and just make sure the opposing columns are in sync sizewise.

  80. Christian Adam Rosell
    Christian Adam Rosell December 26, 2013 at 6:05 am |

    This is the most comprehensive and understandable bootstrap tutorial about grid systems that I have read. Great tutorial.

  81. Yaniv Tal
    Yaniv Tal December 28, 2013 at 3:57 pm |

    This is fantastic and great work on the blog design.

  82. Erik Flowers
    Erik Flowers December 30, 2013 at 11:10 am |

    Thanks. I spend a lot of time working on the nuts and bolts of this thing as a way to unwind and recreate, and experiment with UX ideas and html/less ideas where I am free to just explore. If only you could see the github commit history of this whole site…

  83. Monica Mandal
    Monica Mandal December 31, 2013 at 4:46 am |

    Hi,
    I am not able to use my logo that needs to be centered aligned as responsive with out Grids.

    Please advise.
    Thank you
    Monica

  84. Prize
    Prize December 31, 2013 at 3:54 pm |

    This is really so great & helpful for me

  85. Ray Starkey, Coventry, England
    Ray Starkey, Coventry, England January 11, 2014 at 1:15 am |

    Just great teaching – bravo!

  86. Daniel Munteanu
    Daniel Munteanu January 27, 2014 at 3:06 am |

    Many thanks Erik for this good stuff. Please, can you write if it is
    possible to set the width of the browser at a numerical value in order
    to check the layout at different breakpoints.
    Thank you very much.

  87. Anthony Webb
    Anthony Webb January 27, 2014 at 11:55 am |

    Any idea why ipads show the “sm” grid? If I use a desktop browser and set it to 1024 wide it shows the “md” grid. Same if I visit http://quirktools.com/screenfly/ so I am trying to figure out why the actual iPad itself will only show “sm”? Is this a bug?

  88. Erik Flowers
    Erik Flowers January 27, 2014 at 11:13 pm |

    I have had this question come up in IRC just recently, I am building some test designs for it. I’ll reply here in a few days when I actually have it done.

  89. Erik Flowers
    Erik Flowers January 27, 2014 at 11:14 pm |

    The Chrome inspector will tell you the browser viewport width as you move it back and forth. That’s one solution. I’ll see if I can find more.

  90. Cherie Powell
    Cherie Powell January 28, 2014 at 6:09 am |

    Hi Erik, thanks for this article. I am new to Bootstrap, and started out with v3. I am trying to figure out if there is a way to change the alignment of text (or images) based on which grid size is in effect.

    I am designing a footer and it has three columns. The left column’s content is left-aligned. The center column’s content is centered in its column. The right column’s content is right-aligned. This makes a balanced-looking, pleasing footer on all display sizes other than a phone display. On a phone (extra-small grid), I want these three columns to stack and have all of the content centered (even though some of the content is left-aligned or right-aligned at larger display sizes). Right now in my design, they are stacking, but the L-C-R alignment is making it look terrible.

    Is there a way to do this, to change the alignment of text by size of grid that’s in effect? Please assume I may just not have a basic understanding about something as I am so new to Bootstrap and am not a super-experienced CSS person either. (I muddle along, learning as I go.)

  91. Daniel Munteanu
    Daniel Munteanu January 28, 2014 at 9:45 am |

    Erik, thanks a lot. I found the Web developer add-on for Mozilla Firefox.

  92. Erik Flowers
    Erik Flowers January 29, 2014 at 6:28 pm |

    So I made a test page here http://www.helloerik.com/test-page

    In the Xcode ipad emulator, it shows SM grids at portrait, and MD grids at landscape.

    Remember, this is mobile first, so SM STARTS at 768 or whatever, which is the portrait ipad, meaning that you’ll never see XS, and then it STARTS MD at 990 or whatever.

    So its correct behavior for the ipad to be SM at portrait, and MD at landscape. Also, if you set things to SM, it will show that grid sizing no matter what unless you add a MD or LG like

    test

    Does this help? If not, can you recrate it in jsfiddle or elaborate?

  93. Erik Flowers
    Erik Flowers January 29, 2014 at 6:36 pm |

    this is really easy using the Less setup. If you are using just straight CSS, its a little harder but essentially the same.

    Remebber this is MOBILE FIRST CSS. So you actually code your CSS to center them all since they stack, and then ADD rules to move them left and right, like this

    https://gist.github.com/erikflowers/8701060

    And here is the Less version which I actually wrote, the CSS was just compiled from this:

    https://gist.github.com/erikflowers/8701068

    You can see, works like a charm =)

    Post again if you don’t get why. See the live example here: http://jsfiddle.net/Q6VYq/151/

  94. tb
    tb January 30, 2014 at 5:16 am |

    Hi Erik thanks for your great introduction of Bootstrap 3 it really cleared things up.

    I want to mention one thing about the fully fluid approach. When you use nested rows, you might want to add a class .nested-row{ padding: 0 !important; margin: 0 !important } to remove the padding and margin constraints and have a nice symetric layout.

  95. Ali Hammad
    Ali Hammad January 30, 2014 at 5:32 am |

    Thank you Eric for very clear explanation.

  96. tb
    tb January 30, 2014 at 5:34 am |

    I have created a bootply that demonstrates this:

    http://bootply.com/109534

    cheers :-)

  97. tb
    tb January 30, 2014 at 6:01 am |

    I have done some work in this direction, feel free to check it out under:

    http://bootply.com/109545

    jquery is not fully working on the platform …

  98. Cherie Powell
    Cherie Powell January 30, 2014 at 11:36 am |

    Hi Erik – thank you so much! I see now that I wasn’t really ‘getting’ the mobile first idea, so I didn’t see that the base styles should be centered and then I should make the changes from there for the left and right alignment. Thank you for taking the time to reply with your thorough response and the examples – you really helped me out! This is fun stuff. Learning a lot. Much appreciated!

  99. Barış
    Barış February 14, 2014 at 11:56 am |

    Very nice for beginning. Thanks.

  100. Simon @ QLS
    Simon @ QLS February 22, 2014 at 6:42 pm |

    i’m really getting to like BS3. Thanks to your article, I’ve gotten a bit more understanding on how it works with LESS. I’ll certainly be making reference to this from time to time.
    Bookmarked!

  101. Tom Hanson
    Tom Hanson March 5, 2014 at 10:06 am |

    I had touched on bootstrap 2 and came back to find bootstrap 3 which totally bamboozled me, read this and its all clear now! great article with great examples.

  102. Erik Flowers
    Erik Flowers March 5, 2014 at 10:16 am |

    Never settle for bamboozlment.

  103. Catto
    Catto March 6, 2014 at 9:17 am |

    Erik; Stellar article – This helped me so much in understanding the Bootstrap3 Grid. Thx 4 the info!

  104. Jaypee
    Jaypee March 10, 2014 at 2:13 pm |

    Hi Erik, very nice post. I have a question though on setting up the amount of columns on less.

    Let’s suppose I have this div .

    If I set it up on a non-semantic markup it would be something like .

    Now, if I want to replicate this behaviour on the LESS environment, I’d say that .content {.make-lg-column(4); .make-md-column(6); } is the logical way to. It’s supposed that with this less variables I’d get the same result that on my non-semantic example. The thing I found out is that if you are on a big screen (more than 1200px), the .make-md-column(6) will rule over the lg, even if you’re on the lg size.

    On my inspector I noticed that @media (min-width: 992px) which is the code for the medium column size is ruling the @media (min-width: 1200px) which is the one it should be applied instead.

    What is then the correct way to define the amount of columns for the different screen sizes for a given div?

    Thanks!

  105. Erik Flowers
    Erik Flowers March 10, 2014 at 2:53 pm |

    I am going to have to experiment this with a test site as I can see what you’re saying, but will need a second to figure out why.

    I know I’ve done this scenario before and it’s always worked as intended so there’s something we’re missing.

  106. Erik Flowers
    Erik Flowers March 10, 2014 at 2:58 pm |

    Have you simply tried the ordering, because:

    .make-sm-column(6);
    .make-md-column(11);
    .make-lg-column(2);

    works for me, but

    .make-sm-column(6);
    .make-lg-column(2);
    .make-md-column(11);

    Creates the problem. Can you test it out with the mixins going from smaller to larger?

  107. Jaypee
    Jaypee March 10, 2014 at 3:50 pm |

    Thanks Erik, I’m kind of “wowed” with this, because if I put the smaller sizes first and higher after it will work as it is expected to. Now, how can something so important is not even mentioned on bootstrap’s documentation? It’s crazy!

    Also I have one more for you if you don’t mind :)

    I noticed that if you use the bootstrap class col-lg-xx etc, you have a default padding (left / right) of 15px, why if you work on less, the default is 0px? that is forcing me to set the padding each time I declare a column, something like .make-lg-column(12,60px); if you want to have 30px padding, (for some reason the gutter is divided by 2).
    Any workaround that you may know to make this less painful.

    Thanks a lot!!!

  108. Erik Flowers
    Erik Flowers March 10, 2014 at 3:51 pm |

    Are you putting the divs you are using the mixins on in .rows? And/or using .make-row?

    Even if you create your columns in mixins, those columns need to still be contained in a row in the HTML. The row can be a mixin as well, but it has to be there.

  109. Jaypee
    Jaypee March 10, 2014 at 4:27 pm |

    Yes Erik, I’m putting the divs within rows with .make-row();

  110. Erik Flowers
    Erik Flowers March 11, 2014 at 11:28 am |

    Also by working in the Less mixin method, are you not still wrapping it all in a container? ?You still sort of need to use a container class in the most outer div.

  111. tbs
    tbs March 12, 2014 at 3:16 am |

    hey erik, thanks for that really nice tutorial.
    one question: is it possible with bootstrap to have multiple gutter widths in a single page?
    lets say i have 3 major columns with 30px gutter. inside these columns should live some boxes with narrower gutter. is that possible?

  112. Erik Flowers
    Erik Flowers March 12, 2014 at 1:13 pm |

    This is really hard to say. I’ve never tried anything like it. It would take some ingenuity on how to create a sub-class mixin for nested columns to use a different gutter width.

    Basically I think you’d create a mixin called “.nested-gutter” that does something like take the gutter width variable, and apply some math to it. So @gutter-width (or whatever it actually is) * .5.

    If I can set up a test site, I can try it out. I’m on a new computer and have nothing set up though. Let me see if I can get all my workflow set up.

  113. Erik Flowers
    Erik Flowers March 12, 2014 at 1:13 pm |

    And you’re certain it’s all in a container? Can you recreate this in jsfiddle?

  114. Jaypee
    Jaypee March 13, 2014 at 4:44 pm |

    Hi Erik…100% sure, I’m using the standard structure
    I will do a couple of tests, let me please know if you have any results with yours.
    Thanks!

  115. Vijay
    Vijay March 17, 2014 at 5:00 am |

    superb explanation. Found Helpful. Thanks Ji.

  116. tbs
    tbs March 17, 2014 at 10:28 am |

    hey erik, i got a simple method for this, but i guess, it could be done much better: standard gutter width is 30.

    i made my own variable @grid-gutter-width-s: 20px. now i copied the .make-md-column mixin renamed it to .make-md-column-s and added @grid-gutter-width-s to it. this is pretty dirty cause i have to duplicate a lot of code and put an -s suffix on it.

    what i d rather wanna do is just to set the class .row-small-gutter in the html and all children columns automatically get the small-gutter width. any idea how that could be done nicely?

  117. llong
    llong March 18, 2014 at 11:10 am |

    col-xs-12 adjusts for the .row gutter if you want a full width row to line up on all devices.

    padding-left: 15px;
    padding-right: 15px;

    However, it is redundant for any element that has any other column class.

  118. Erik Flowers
    Erik Flowers March 18, 2014 at 4:22 pm |

    My reply above was wrong and outdated, btw.

  119. Erik Flowers
    Erik Flowers March 18, 2014 at 4:24 pm |

    Not really. This is an edge case I haven’t heard of. Really you just want to make the padding smaller on any column. You could just wildcard it and add !important. Or there is the new mixin that has the gutter width in it, but I haven’t used it at all.

  120. Couple Interesting UI/UX Posts | esuix rest

    […] A nice explanatino of using LESS with bootstrap http://www.helloerik.com/bootstrap-3-grid-introduction​ […]

  121. steph
    steph April 4, 2014 at 7:05 am |

    thanks erik. nice one.
    i am just wondering whats the best workflow for e.g. removing borders from buttons.
    i just could override .btn with border:none; in a seperate css file. but since we use less,
    there could be a better way to not have a double .btn class in the compiled output file.

  122. Developer Beginner
    Developer Beginner April 13, 2014 at 2:48 pm |

    Veeeeery GOOD article. You made it so easy for me to finally understand the grid system on bootstrap 3. Kudos to u!

  123. Hello world: How to start programming | Emily D

    […] a styling template and LESS to make the CSS more manageable. I also recommend Erik’s blog post on bootstrap’s grid […]

  124. Robin
    Robin April 21, 2014 at 8:20 pm |

    Hi,
    I am little bit confused about column selection and mixing for responsive. I see some developer only use col-sm-# and col-xs-# in total template and also those template is approved in premium themes. Now my question is where is the other device like medium desktop and large desktop support. I have another confusion in column mixing. If my column is like this what will be the other col-?-# layout if i want to responsive

    ection –>

  125. Erik Flowers
    Erik Flowers April 21, 2014 at 8:29 pm |

    Column sizes inherit upwards, since Bootstrap 3 is designed mobile-first. That means, if you design a layout at col-*-sm, it will work the same at md and lg. You only have to declare a column at the smallest size you desire.

    In your example code, you declare the columns at the lg size. This means that they will only be a 7 and 5 at large, and otherwise they will be the full width 100% columns on xs, sm, and md.

    You should make your design at the smallest size desired, then adjust it for larger sizes if needed. If you do not set a smaller column size, it will default to 100%, just like xs.

  126. Robin
    Robin April 21, 2014 at 8:44 pm |

    Thanks Erilk for your kind replay. Now I understand the real theme.
    Can you share me any reference of column ratio. Let me clear it to you. If one of my div class is col-sm-3 than what will be the others col-xs-? col-md-? col-lg-?

  127. Erik Flowers
    Erik Flowers April 21, 2014 at 8:48 pm |

    It goes from xs -> sm -> md -> lg

    So if you set col-sm-3, it will be

    xs-12 -> sm-3 -> md-3(sm-3) -> lg-3(sm-3).

    You don’t have to set md or lg if you set small – it flows upwards, not downwards.

    Another example would be

    xs-12 -> sm-12 -> md-5 -> lg-5(md-5)

    or

    xs-12 -> sm-12 -> md-12 -> lg-7

  128. Robin
    Robin April 25, 2014 at 4:37 am |

    Hi Erik,
    Just now I am learning bootstrap 3. Currently I develop a site which width is 980px and the site is responsive also. So how can I edit the container width with bootstrap scaffolding and the column size.
    Thanks

  129. Alin Ambrosie
    Alin Ambrosie May 6, 2014 at 12:29 am |

    Hi Erik, great article. I’m using bootstrap for over a year and never benefit from the power of less. By the way, if you want to add, let’s say a hidden-phone class to the sidebar, how do you do it with less?

  130. Erik Flowers
    Erik Flowers May 6, 2014 at 8:18 am |

    BS3 is mobile first, so if you want something hidden on the phone size, technically it is hidden by default. It is important you understand what that means. There is no “phone size”, there is just default, and then the 3 media query modifications you can add for tablet, destktop, and large-desktop.

    So it would be like this inside of your class.

    .theClass {
    display: none;
    @media(min-width: @screen-tablet) {
    display: block;
    }
    }

    The class “.theClass” is hidden. If you want it revelaed at bigger sizes, you add that media query mixin to make it appear at tablet and above.

    I think Bootstrap may want to call the query variables “screen-sm” now instead of “screen-tablet” but I still refer to the tablet/desktop naming as it’s still supported.

  131. danny__garcia
    danny__garcia May 7, 2014 at 8:17 pm |

    I’ve tried learning the grid system before and I’ve never been able to fully understand it until reading your post. Thanks a lot for putting the time to write this.

  132. antonio
    antonio May 28, 2014 at 11:07 pm |

    This is a great tutorial that Bootstrap should provide as documentation. So thank you for your time.

  133. Amit Kolambikar
    Amit Kolambikar July 4, 2014 at 11:18 pm |

    In example 1 you have written alt for class name also..what does it mean ?

  134. Erik Flowers
    Erik Flowers July 4, 2014 at 11:39 pm |

    It just colors it red for the example.

  135. Virus
    Virus July 16, 2014 at 12:27 am |

    hello

  136. larry
    larry July 20, 2014 at 9:14 am |

    I agree with antonio, this excellent tutorial should be part of Bootstrap’s documentation, which I found to be sorely lacking. Great job, Erik. I foresee you writing books in your future :)

  137. Gezim Hoxha
    Gezim Hoxha July 31, 2014 at 1:42 pm |

    Thanks for this great article, Erik. It’s immensely useful.

    I’m not sure if the .container-fluid class came after 3.0 but it seems to do exactly what your .my-fluid-container does. Perhaps that can be updated.

    Thanks!

  138. Erik Flowers
    Erik Flowers July 31, 2014 at 1:44 pm |

    It was added later, you are correct. I think in 3.1 or 3.2

  139. Rob_at_rogue_heart
    Rob_at_rogue_heart August 11, 2014 at 10:21 am |

    This was super helpful! Thanks for putting this together.

  140. The Birth of the Shoelace Bootstrap Grid Builder | Experience Design at Hello Erik

    […] Bootstrap 3 Grid Introduction […]

  141. JSn00b
    JSn00b October 7, 2014 at 2:49 pm |

    This is a long and convoluted article. Could you be more consize? Like:

    * There are four basic device type/sizes.
    * There is a 12-column grid no matter what device type.
    * For each device type one can choose how wide an element is in terms of grid columns using classes: col-xs-*, col-sm-*, col-md-*, col-lg-* For example, if I wanted an element to take 4/12 == 1/3 on a large device, 6/12 == 1/2 on a small device and 12/12 == 1 on a tiny device I would use class=”col-lg-4, col-sm-6, col-xs-12″.

    And this is it.

    If I wanted a longer writeup, this page: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php makes more sense and has more information than your beating around the bush.

  142. Matthieu Heimer
    Matthieu Heimer October 13, 2014 at 10:46 pm |

    v3.1.0 re-added .container-fluid http://getbootstrap.com/css/#grid-example-fluid

  143. BR
    BR November 10, 2014 at 4:07 am |

    I haven’t read it all but it appears to be one of the best Bootstrap basic tutorials out there, and I’m comparing also against paid courses at lynda.com, for example (I have walk through those only to find that I didn’t fully understand Bootstrap 3 grid, as a newcomer to the CSS grid frameworks).
    Great job and thanks!

  144. The Subtle Magic Behind Why the Bootstrap 3 Grid Works | Eduardo Akio Fukunari - Blog

    […] sure to check out the other Bootstrap 3 articles: The Bootstrap 3 Grid Introduction and Bootstrap 3 Less Tutorial […]

  145. Chloe
    Chloe November 11, 2014 at 3:26 am |

    Hello Erik,

    I have searched many forums and still my question/problem remained unanswered.
    I found your blog and I thought maybe you could help me with my little problem..

    I used bootstrap framework for my website.
    Everything is working fine so far BUT:

    I have a small problem which is the following:
    – links are disabled when device width changes. On ipad portrait change and on iphone,
    the links (images and text) are somehow disabled.

    I think it is a viewport css problem but I am not sure..

    if you can fix this little bug or help me going in the right direction, that would help:-)

    Thank you for reading
    Chloe (designer not coder)

  146. Erik Flowers
    Erik Flowers November 11, 2014 at 11:22 pm |

    I’d have no way of actually helping if I didn’t see the source HTML, but, here is what you need to do first: you need to go through your entire page and make sure all the HTML tags open and close in the right order, and that tags aren’t closing themselves outside their parents. OR, that you aren’t putting elements that shouldn’t go inside others, like putting a inside of an .

    the reason for that is sometimes, when the HTML “works” but isn’t 100% valid, it seems to work but then when the viewport changes or the elements move around etc, there is a “thing” on top of what you’re trying to click, an unclosed tag or something of that nature. So even though you think it’s correct, and it works fine some of the time, when it becomes unclickable, it’s because technically you’re clicking on something on TOP of the link, some div or other element.

    This is hard to explain, but I actually have seen this before when reviewing someone elses code. Turned out it was something like . That HTML looked like it worked, but it would end up with some funky business after.

    That’s the best I can do with the info you gave me =D

  147. Aniket
    Aniket February 20, 2015 at 1:53 am |

    This is the best explanation for bootstrap 3 grid layout…
    thanks for sharing.

  148. Cloudgate313
    Cloudgate313 April 5, 2015 at 10:16 pm |

    Erik, read all three of the articles on Bootstrap 3, informative, thank you. I am trying to apply bootstrap classes to columns in my .less file. Outside of setting up the row, and dividing up the columns what else can you apply from the .less file?

    Can I apply the .visible/invisible classes in my .less file?

    #homePageFooter {
    background-color: #bfb7aa;
    padding-bottom: 35px;
    .container();

    #footerLeft {
    .make-xs-column(12);
    .make-sm-column(12);
    .make-md-column(3);
    .make-lg-column(3);

    .visible-lg;
    .visibel-md;
    .invisible-sm;
    .invisible-xs;
    }

    /* Replacing this “class” class=”col-lg-3 col-md-3 col-sm-12 col-xs-12
    visible-lg visible-md invisible-sm invisible-xs” */

    }

  149. Erik Flowers
    Erik Flowers April 6, 2015 at 8:21 am |

    Yes, you should be able to keep all classes out of the HTML.

    In your example, you don’t need “make-xs-column(12)” oor “make-lg-column(3)”. those are redundant – the XS size doesn’t need to be declared since it’s defaulted that way, and the LG column will just inherit the MD size 3.

    If it doesn’t work, reply back here and I’ll see if I can set up a test file to try and get it right. But theoretically it should work as you assume.

  150. Kuldeep Sharma
    Kuldeep Sharma May 5, 2015 at 12:28 am |

    Hello Erik i am enjoying to learn from here but some queries are there please help me.

  151. Kuldeep Sharma
    Kuldeep Sharma May 5, 2015 at 12:29 am |

    .left-and-right {

    .make-row();

    .left {

    .make-sm-column(1);

    .make-md-column(7);

    .make-lg-column(4);

    }

    .right {

    .make-sm-column(11);

    .make-md-column(5);

    .make-lg-column(8);

    }

    }

    where should i write this code ?

  152. Pinu Jain
    Pinu Jain May 6, 2015 at 9:55 pm |

    Thanks for such a wonderful explanation!

  153. Prashanth S
    Prashanth S May 21, 2015 at 10:20 pm |

    Hey,

    Using less mixins like .make-row() will increase the actual lines of css, isn’t it?

    BTW why do you want to remove the grid markup from html? To improve readability?

    Prashanth

  154. Tushar Dahiwale
    Tushar Dahiwale July 3, 2015 at 2:21 am |

    How to achieve two columns with 1:7 ratio, that is total 8 divisions, but 1 in one column and 7 in another.

  155. Erik Flowers
    Erik Flowers July 3, 2015 at 11:12 am |

    For your Less, you would make 2 classes that declare the columns inside, so

    .first {
    .make-sm-column(1.5);
    }

    .second {
    .make-sm-column(10.5);
    }

    Then your html is simply

    First column that is 1/8 wide
    Second column that is 7/8 wide

    Easy as that.

  156. fourwhitesocks
    fourwhitesocks July 10, 2015 at 4:34 am |

    This is so helpful THANK YOU!

    I’m still needing help understanding something tho..Here’s an example: I grabbed some code for a small Bootstrap Lightbox Gallery and the columns go as such:

    I know understand the first two but why OR is it necessary to have that col-6 at the end? How is that affecting the whole div??

  157. Erik Flowers
    Erik Flowers July 10, 2015 at 6:03 am |

    That last class is an error. There is no naked col-6 without a size modifier like xs, sm, md, lg.

    So it doesn’t do anything as it is since there’s no bootstrap CSS for it.

  158. fourwhitesocks
    fourwhitesocks July 10, 2015 at 6:25 am |

    Oh cool so happy for the quick response!! It seems really odd that the site I got that from had 12 columns marked up like that…I thought maybe that was something that you had to add for a reason, even tho it made no sense to me.
    Your help is much appreciated!

  159. Bootstraps Grid-System und ein erstes CEEC-Redesign - */lehre

    […] Bootstraps GridSystem ist erläutert unter http://getbootstrap.com/css/#grid. Eine gute Einführung in die Arbeit mit dem Grid findet sich unter http://www.helloerik.com/bootstrap-3-grid-introduction. […]

  160. Carlton McFarlane
    Carlton McFarlane January 2, 2016 at 3:30 pm |

    I know this comment is late, Erik, but I just wanted to add my thanks as a n00b for a great post-cum-tutorial… will you be writing one for v.4 when it is finally released?

  161. Erik Flowers
    Erik Flowers January 2, 2016 at 3:41 pm |

    I am going to look at v4 and see what has practically changed and how it impacts these tutorials. From what I know, the basic way the grid works with the HTML isn’t going to change a lot, they are just adding a 5th size, which is no big deal, it’s just adding “col-xl-*” to the top end, and shifting the pixel widths each “size” changes at. But that doesn’t change anything about the tutorial or how the grid works.

    As far as the Less, that will all be obsolete for v4 since it will be coded in Sass. There’s not a huge fundamental difference in how Less and Sass work, but the syntax will be different. I might go through and add a Sass version of the Less so that it works the same in v4.

    There is a lot of behind the scenes changes in v4, but for the 3 articles I wrote, it doesn’t actually change much, and I can probably add a “updated” section at the top and just change the nomenclature to v4.

  162. Ted3.0
    Ted3.0 September 1, 2016 at 4:58 am |

    Hello,

    Thanks for the post and i have gained some valuable lessons from the post. However i had problems with the example, specially regarding the mixins. I could not see them in the contents of the example, i tried to see the source code through browser inspect, and i only see the basic col-md-* markup with some editing on the CSS. Is that on purpose or am i missing something?

    Thanks

  163. Erik Flowers
    Erik Flowers September 1, 2016 at 6:05 am |

    The mixins are all Less, a CSS preprocessor language, read about it here http://lesscss.org/#

    You can’t see Less and its mixins in finished html or css. It’s all done behind the scenes, before compile.

  164. Ted3.0
    Ted3.0 September 2, 2016 at 2:18 am |

    I see, thanks for the quick response Erik.

Leave a Reply

You must be logged in to post a comment.