User Experience at Hello Erik

Bootstrap 3 Grid Introduction

August 19, 2013

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

    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.

  • http://chromano.in/ Carlos H. Romano

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

  • Pingback: codescaling | Bootstrap 3 – The strap is rebooted

  • Rick

    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

  • http://www.helloerik.com/ Erik Flowers

    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!

  • Christian Hansen

    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.

  • http://www.helloerik.com/ Erik Flowers

    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.

  • http://www.helloerik.com/ Erik Flowers

    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!

  • iweczek

    Is it possible to download your WordPress Bootstrap Theme?

  • Andrew Ma

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

  • http://www.helloerik.com/ Erik Flowers

    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.

  • http://www.helloerik.com/ Erik Flowers

    See response below (above?)

  • Brent Jones

    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.

  • http://www.helloerik.com/ Erik Flowers

    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?

  • http://www.helloerik.com/ Erik Flowers

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

  • Brent Jones

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

  • Pingback: Links & reads for 2013 Week 34 | Martin's Weekly Curations

  • Pingback: Log Review #1 ( HTML CSS jQuery Laravel Tutorial AngularJS ) » Starck Lin

  • Kate

    Thank you, thank you thank you!

  • Ole Fredrik Lie

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

  • Irina

    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.

  • http://www.helloerik.com/ Erik Flowers

    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.

  • rahul patwa

    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!

  • http://memeLab.com.au/ Tim Osborn

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

  • http://www.helloerik.com/ Erik Flowers

    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

  • http://memeLab.com.au/ Tim Osborn

    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

  • Rick

    Thanks for the link Tim, good to know!

  • Paolo Limoncelli

    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;

    }

  • http://www.helloerik.com/ Erik Flowers

    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.

  • Paolo Limoncelli

    As I imagined… Thank you!

  • David

    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

  • http://www.helloerik.com/ Erik Flowers

    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

  • hassan jamal
  • hassan jamal

    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

  • David

    Thanks very much for explanation

  • David

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

  • http://www.helloerik.com/ Erik Flowers

    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

  • Florencia Coppola

    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

  • http://rajibpaudyal.com/ Rajib Paudyal

    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.

  • Guest

    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

  • hassan jamal

    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

  • alex

    owesome!!!

  • Pingback: Bootstrap 3, quoi de neuf? | Onasus

  • Pingback: Bootstrap 3 Less Workflow Tutorial | UX at Hello Erik

  • Sebastian

    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.

  • http://www.helloerik.com/ Erik Flowers

    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.

  • Pingback: Bootstrap 3.0 | אמנות המסך

  • http://www.infobizzs.com/ Steve Fort

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

    http://www.infobizzs.com

  • Chu Quang Tú

    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.

  • Mokviper

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

  • Nigel

    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,

  • http://www.helloerik.com/ Erik Flowers

    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 =)

  • Nigel

    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?

  • http://www.helloerik.com/ Erik Flowers

    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

  • Claudio Álvarez

    Very clear explanation, thank you for this post!

  • Janusch

    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!

  • David Andersson

    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

  • pezzab

    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.

  • gumaflux

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

  • Paul

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

  • hunzaboy

    Thanks alot!

  • Pingback: The Subtle Magic Behind Why the Bootstrap 3 Grid Works | UX at Hello Erik

  • http://www.designingsean.com Sean Ryan

    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?

  • http://www.helloerik.com/ Erik Flowers

    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.

  • Antonio Brandao

    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″)

  • Mukesh

    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

  • Jon Crowell

    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.

  • http://www.helloerik.com/ Erik Flowers

    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

  • http://www.helloerik.com/ Erik Flowers

    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.

  • http://www.helloerik.com/ Erik Flowers

    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?

  • http://www.helloerik.com/ Erik Flowers
  • Antonio Brandao

    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!

  • Vino

    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

  • http://www.helloerik.com/ Erik Flowers

    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.

  • Pingback: Bootstrap 3 | rgbskills - developer_is(Benko Zoltan)

  • http://www.vincentcordel.com/ Vincent Cordel

    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? :)

  • http://www.vincentcordel.com/ Vincent Cordel

    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

  • http://www.helloerik.com/ Erik Flowers

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

    .make-sm-column-push(NUMBER)

  • http://www.helloerik.com/ Erik Flowers

    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.

  • Christian Adam Rosell

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

  • Yaniv Tal

    This is fantastic and great work on the blog design.

  • http://www.helloerik.com/ Erik Flowers

    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…

  • Monica Mandal

    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

  • Prize

    This is really so great & helpful for me

  • Ray Starkey, Coventry, England

    Just great teaching – bravo!

  • Daniel Munteanu

    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.

  • Anthony Webb

    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?

  • http://www.helloerik.com/ Erik Flowers

    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.

  • http://www.helloerik.com/ Erik Flowers

    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.

  • Cherie Powell

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

  • Daniel Munteanu

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

  • http://www.helloerik.com/ Erik Flowers

    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?

  • http://www.helloerik.com/ Erik Flowers

    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/

  • tb

    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.

  • Ali Hammad

    Thank you Eric for very clear explanation.

  • tb

    I have created a bootply that demonstrates this:

    http://bootply.com/109534

    cheers :-)

  • tb

    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 …

  • Cherie Powell

    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!

  • Barış

    Very nice for beginning. Thanks.

  • http://quaverlovestudio.net/ Simon @ QLS

    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!

  • Tom Hanson

    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.

  • http://www.helloerik.com/ Erik Flowers

    Never settle for bamboozlment.

  • http://www.ChrisCatto.com Catto

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

  • Jaypee

    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!

  • http://www.helloerik.com/ Erik Flowers

    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.

  • http://www.helloerik.com/ Erik Flowers

    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?

  • Jaypee

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

  • http://www.helloerik.com/ Erik Flowers

    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.

  • Jaypee

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

  • http://www.helloerik.com/ Erik Flowers

    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.

  • tbs

    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?

  • http://www.helloerik.com/ Erik Flowers

    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.

  • http://www.helloerik.com/ Erik Flowers

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

  • Jaypee

    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!

  • Vijay

    superb explanation. Found Helpful. Thanks Ji.

  • tbs

    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?

  • llong

    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.

  • http://www.helloerik.com/ Erik Flowers

    My reply above was wrong and outdated, btw.

  • http://www.helloerik.com/ Erik Flowers

    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.

  • Pingback: Couple Interesting UI/UX Posts | esuix rest

  • steph

    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.

  • Developer Beginner

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

  • Pingback: Hello world: How to start programming | Emily D

  • Robin

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

  • http://www.helloerik.com/ Erik Flowers

    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.

  • Robin

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

  • http://www.helloerik.com/ Erik Flowers

    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

  • Robin

    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

  • Alin Ambrosie

    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?

  • http://www.helloerik.com/ Erik Flowers

    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.

  • danny__garcia

    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.

  • antonio

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

  • Amit Kolambikar

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

  • http://www.helloerik.com/ Erik Flowers

    It just colors it red for the example.

  • Virus

    hello

  • http://emergingtruths.com/ larry

    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 :)

  • http://www.kalif.ca Gezim Hoxha

    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!

  • http://www.helloerik.com/ Erik Flowers

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

  • http://www.rogueheartmedia.com Rob_at_rogue_heart

    This was super helpful! Thanks for putting this together.