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

The Subtle Magic Behind Why the Bootstrap 3 Grid Works

Posted November 5, 2013

Things like CSS grids should remain behind the curtain. No one really needs to know how it works, or why. Until you have a broken design or something complex and you can’t figure out why your spacing, margins, paddings etc are all messed up. It can be a real pain, especially when you are generating content dynamically in some sort of interface that changes and shifts.

I’ve seen a number of people confused or irritated at how the bootstrap grid works. I’ve explained it a bunch of times, and it always makes sense afterwards. So I’d like to quickly and visually explain why the Bootstrap grid works, not necessarily how. Let’s check out this one weird trick about how Bootstrap does its magic.


The container has 2 purposes:

  1. To provide the width constraints on responsive widths. When the responsive sizes change, it’s the container that changes. Rows and columns are all percentage based so they don’t need to change.
  2. To provide padding so the content doesn’t touch the edge of the browser. This is 15px on each side as seen in pink in the image. This is explained more later.

You never need another container inside of a container. Never. You’ll see why.


The row provides the columns a place to live, ideally having columns that add up to 12. It also acts as a wrapper since all the columns float left, additional rows don’t have overlaps when floats get weird.

Rows also have a unique aspect of having 15px of negative margin on each side, as seen in blue in the image below. The div that makes up the row would normally be constrained inside of the containers padding, touching the edges of the pink area but not beyond. The 15px negative margins push the row out over top of the containers 15px padding, essentially negating it. Why? Because of how the columns work as we’ll see next.

Never use a row outside a container, it won’t work.



The columns now have 15px padding, seen in yellow. This padding means that the columns actually touch the edge of the row, which itself touches the edge of the container since the row has the negative margin, and the container has the positive padding. But, the padding on the column pushes anything inside the column in to where it needs to be, and also provides the 30px gutter between columns.

Never use a column outside of a row, it won’t work.


Content Within a Column

The column padding is what gives your content the space it needs to not touch the edge of the browser, or the content in the other columns next to it. This is where the whole container/row/column scheme finally culminates.



When you have a container, row, and column set up, you can make new grids inside of a column. You add rows right inside the outer columns, you do not need to use them in containers:


The trick here is that the column acts the same way as a container, it has 15px of padding that allows the row’s negative 15px of margin to overlay it… which in turn lets columns inside of this new row touch the edges, but push the content in with its own 15px padding, which also creates the gutter, as seen below.



Offsets are pretty simple, they just add a left margin to the side of a column to push it over. Where it gets weird is that the margin pushes off from the -15px margin on the row when on the far left, and when in the middle of a row it pushes off from the right side of the preceding column. It splits and separates the gutters. Other than that, they behave as columns would regarding how they float, push things around, etc.

Nothing really to it.


Push and Pull

Let me start by saying why you push/pull: to flip layouts based on responsive sizes. Especially good for reordering how columns are laid out from a mobile design, to the desktop design, as it allows you to break the HTML top -> left drawing of divs.

These are more confusing as they actually add positioning to the columns, not margin. A push adds left positioning, and a pull adds right positioning. Since they are floated and also contained in a relatively positioned container, the row, they move to the distance you set, ie col-sm-push-4, with the positioning.


This is a problem because it can make columns just overlap and not behave like normal or like an offset. So if you push one to the right, it’s going to be on top of the one on the right, and vice versa. So almost always, when you use push/pull, you do complementary inverses, if you push a column to the right, you’ll almost always be pulling a column to the left a complementary distance.



The Reasoning Behind It

Container: The container works this way so that the edges of the container can have that virtual 15px padding around the content, but not require the body tag to have a 15px padding. This was a change in the RC1 of Bootstrap 3. Otherwise, the entire body would have a 15px padding, which would make non-bootstrap divs and such not touch the edges, which is bad for full width divs with colored backgrounds.

Rows: Rows have negative margin equal to the containers padding so that they also touch the edge of the container, the negative margin overlapping the padding. This lets the row not be pushed in by the container’s padding. Why? Well…

Columns: Columns have the 15px padding again so that they finally truly keep your content 15px away from the edge of the container/browser/viewport, and also provide the 15px + 15px gutter between columns. It is like this so that there doesn’t have to be a special first/last column that doesn’t have padding on the left/right, like in grids of old (960, blueprint, etc). Now, there is a consistent 15px space between the edges of the columns at all times, no matter what.

Nested Rows: Nested rows work just as above, only now they overlap the padding of the column they are inside, just like the container. Essentially, the column is acting as the container, which is why you never need a container inside of anything.

Nested Columns: Nothing is different here now, works the same as before.

Offsets: These essentially split gutter widths to increase the space between columns by however many column units you want. Very, very simple.

Push/Pull: These make use of positioning to trick HTML into flipping elements from left to right when going from mobile to desktop sizes. Or, for when you have a special use-case where offsets don’t work.

Common Problems

There are a few common problems that come up. Most of these are easily visible once you know what to look for in your HTML.

Lack of a Container: The first is the lack of a container. Not having a container means that there is no padding for the row’s negative margins to overlap, meaning now the row pushes outside of its parent element. This is the most common reason for odd column alignment or weird horizontal scrolling when you’re close to the edge of the browser, or have a container with a hidden overflow.image-10

Lack of Rows: The next similar problem is not having a row. This goes in the opposite direction as now you have double padding on your edges, meaning now instead of the 15px between the edge of your browser/viewport, you’ll have 30px. And, your columns won’t float right and you’ll have weird float overlaps since there’s not the row there to “clear” the stacked columns.

Also, when you’re trying to nest grids, which is fine, a lack of a row will also double up the padding, so as you see below there is now 45px of padding on the left! Rows would fix this so that the nested grid was only 15px away from the edge of the browser/body as the first row overlaps the container padding, the first column touches the edge of the row, the inner row overlaps the outer columns padding, and the inner inner column touches the edge of that inner row! This is a LOT easier to see in practice, and you can see it in the nesting image up at the start of the article.


Containers Inside of Anything Else: A container inside of anything else acts like a column by adding new padding, but also adds all the responsive widths and snap points that are unique to a container. By using a container anywhere inside another container, you’re going to have problems. It is never appropriate and will just cause all sorts of havok.


Offset/Push/Pull: When using offsets and push/pulls, most of these still apply. Offsets are pretty simple as they just make columns bigger. Push/Pull is different is that if you make it too big, you can just push columns outside of their containers. Pretty easy to notice, just use common sense.


Those are some of the most common, basic grid problems. If you’re having trouble with a design with lots of nesting, or if your varying responsive layouts aren’t working how you want, go through and see if you have any of these problems first. If you fix these, often you’ll solve most of your issue that isn’t related to your custom layouts.

That’s It

This is why the Bootstrap 3 grid works. It’s really clever and provides an awesome solution most of us don’t realize is taking place. After many, many years of using grid frameworks, this is the most elegant solution I’ve used so far. Even though you might look at this and think it looks convoluted, it’s really using the limitations and abilities of CSS to give us a dead-simple way to make a grid that makes sense in practice, if not entirely under scrutiny.

Be sure to check out the other Bootstrap 3 articles: The Bootstrap 3 Grid Introduction and Bootstrap 3 Less Tutorial Workflow

I love all things experience design. I work as a Principal Service Experience Designer at Intuit in Mountain View, CA.
  • Pingback: Bootstrap 3 Grid Introduction | UX at Hello Erik()

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

  • Gonzalo Suez

    great article Eric, easy to understand, thanks for sharing!

  • nedux

    Thank you for writing this. It really helped me understand how bootstrap3 grid works. You explained it very nicely with colors.

  • Daniel Pinciuc

    awesome, dude!

  • Shinekhuu D

    Great, really helped me understand how bootstrap works. Saves a lot of time of mine

  • Philip Holly

    Great explanation and diagrams. I was confused as to why columns inside rows inside containers would still effectively yield 15px padding on the container. I was thinking the columns should span the full width of the container. But now I see that the container is meant to always have 15px – no matter what content is in it, whether it be rows with columns or not. Followed.

    Do you do contract work?

  • The Conscious Life

    Brilliant explanation on how bootstrap’s grid system works. It’s so much clearer than the official documentation on Thanks!

  • dylanvalade

    I was unsure why my layouts would need pull or push but you cleared it up with your inverse comment.

  • Pingback: | msarm()

  • Karl

    Rarely do I ever leave comments. But your post is so well done I just had to say “thank you”. It is clear, well organized and straight to the point. No fluff. Much appreciated.

  • Kristina Lemasson

    I agree with everything Karl said! This post is so much clearer than the official documentation, and an enjoyable read, no less. Thank you, Erik!

  • Pingback: Bootstrap 3. Grid system | Yaiza Bailén()

  • Erik Flowers

    All killer, no filler. 24/7yolo.

  • fakeartist

    Excellent article! I have a question though.

    You say that not having a container means that there is no padding for the row’s
    negative margins to overlap, meaning now the row pushes outside of its
    parent element. That’s true. But what I you want to make bootstrap full width with rows and columns in it? What should one do in this occasion? If I don’t use a container (in order to take full width) then I will have problems with any rows that I use in my code.

    Thanks in advance.

  • Erik Flowers

    You can do it like shown here:

    .my-fluid-container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;

  • WoodyGrape

    Wow this was amazing. I have been using bootstrap a couple months and this just perfectly explained exactly how the grid system works. This explains it 10x better than the doc does

  • John Counsel

    Erik, thanks for this. So nice to have someone with a strong sense of visual communication explain it in such a simple, comprehensible way. :D

  • Whit

    nice work, Erik!

  • Joseph Rex

    This is really awesome. Thanks to guys like you that spend your time making life easier for others

  • Erik Flowers

    It’s the little things.

  • darb

    on your bootstrap theme… .about-author .avatar-box img { height: 100%;

    makes your favicon VERY tall and stretched, right after reading about why bootstrap grid works lol

  • Erik Flowers

    i dont see this anywhere. browser?

  • Royce Lithgo

    Brilliant yet again. The mystery of Bootstrap 3 grids is now making sense. Thank you!

  • Royce Lithgo

    I have a question regarding the 12 columns. I remember reading somewhere on the Bootstrap site that ideally the number of columns should add to 12, but then in their grid explanation they have examples where it explicitly exceeds 12, which forces the additional columns to stack. I’m a little puzzled by this.

  • Erik Flowers

    Columsn can stack inside a row, which is part of responsive design. It’s a design decision. You may have a col-md-12 and col-md-12 that you want to change to a col-lg-6 col-lg-6. Well, you’d have a stacked column setup at md, but side by side at lg.

    Or maybe you want a 6 6 12 at one size; that would give you 2 rows of columns in a .row. But then you could change that to any variation of 3 at a different size, i.e. a 4 4 4.

    It’s just a way to design. A lot of times there’s no need. But remember, this is mobile first design, so EVERY design starts as a col-xs-12 in the mobile view, and then builds up into other columns.

    If you want to play around at, you can sorta get a visual of how it works in the editor and also in the preview:

  • Royce Lithgo

    I get it now. Whenever you exceed the 12 column boundary, you’re starting a new stacked line (avoiding calling it a row because row has special meaning within Bootstrap) within the current row.

    That visual editor at is brilliant. Easiest way to get a handle on all this.

  • david

    Best explanation and set of illustrations I’ve seen!


    I see it that way on my playbook.

  • Ji Sames

    Thank you for a great explanation, Erik! You deserve a ‘Grid-Jedi’ robe.

  • Fred

    This is an awesome review. Thanks for sharing!

  • André Moura

    Muito bom.

  • Right One Design

    Great article and makes it so clear on how Bootstraps grid works!

  • Pingback: The Subtle Magic Behind Why the Bootstrap 3 Grid Works | Eduardo Akio Fukunari - Blog()

  • Jean-Luc Esser

    Terrific piece, thank you so much for writing this.
    The official bootstrap documentation is misleading (get, do you know why ? Column size do not add up : 12*60 is 720 ; container size is 750 ; column should be a mix of 62 and 63 ! And that’s true for every container size (750, 970, 1170). Would love to have your take on this !

  • Erik Flowers

    This is an interesting observation.

    Technically, the columns are percentages. 1 column at small is 8.333333333%, which times 12 is like 99.9996%. So it’s not pixel exact, as it’s much easier to use the percents.

    As far as the width including the padding, that’s a point of view where do you want to know the usable space inside the column, or the width from the gutter edge to edge. The usable space inside a small column is 32 pixels roughly.

    This isn’t really accurate though, since if you do a 6 column small col, 32×6 is only 192px. So you have to add the gutters, minus 30. So that’s 372px minus 30, for 342px. But the actual width is 345px.

    It will never be perfect as the cols are percents, and the paddings are pixels.

    So, the width of a column in pixels really isn’t that useful if you want to be super accurate. Even in the doc, 60px times 6 is 360px, but the actual usable space is 345px. Regardless, I don’t really see any issue with this, unless you’re trying to make something like an image the exact width.

  • rafark

    Supernice! I don’t usually comment in blogs like most people, but your explanation was fantastic! Thank you so much.

  • gwhosubex

    Now I have another great example of clear teaching to model

  • Orlando

    Wow! Simple and elegant explanation!

  • Filippo Mangione

    Simple and comprehensive explaination. Thanks.

  • Peter Barnes

    Thank you SO MUCH for this fantastic explanation of this concept! I was having enormous amounts of trouble with the gutters but the problem was that I wasn’t using a container!

  • JamesNV

    Another gotcha: if you have a row, you NEED a column. Never put content in a row.

  • Tharanga Nuwan Kumara

    I totally agree with Karl. Just I need to tell “Thank YOU”….. THANK YOU so much…

  • snekse

    What did you use for your wireframe images?

  • Erik Flowers

    It is simple Illustrator boxes with one of the factory stroke styles applied.

  • Dmitri

    Some great explanations here! It can be frustrating to fight through the massive jungle of Bootstrap’s declaration, and they can really do better explaining what individual classes actually do. I am still puzzled why they still use floats for the layout (together with the hacky “clearfix” caused by it), whereas display: inline-block seems to be the recommended practice.

  • Erik Flowers

    I have never thought about it, but I am assuming it has to do with the mobile-first CSS structure and how the push/pull works for flipping sides based on the media query width you want your columns set to.

    This is a guess, and also something I doubt I’ll try to test =P

  • Dmitri

    Thanks, I wish Bootstrap was more open. After several hours work I got a very simple Navbar that seem basically to do what their Navbar: Why can’t they make it so simple? Their example are full of custom declarations, which does not look clean to meet. A good framework should take away the pain of making those declaration in first place. Of course, one may want to tweak things, but they should not be in the “official examples” that should focus on showing how the framework works, not how it needs to be “fixed”.

  • Pingback: Bootstrap 3 grid system illustrated & explained | just some notes()

  • Tim Osborn

    wow.. shoelace rocks!

  • Erik Flowers

    Care to elaborate on what you like and what you think of the concept and usability?

  • Tim Osborn

    Its snappy and sexy, for one thing!

    the very best thing about bootstrap IMHO is the grid system (forms are super handy, too – a form builder would be a strong progression if you’re developing the tool), and your tool focusses on that in a mac’ish ‘do one thing well’ fashion.

    I love that you’re building the layout with less mixins… looking at it this way makes it abundantly clear to those new to BS that you should religiously nest .container > .row > .col* > .row > .col*. That’s a super clear takeaway!

    Having seen how clean that layout is without ‘presentational’ styles, I’ll change the way I prototype as a result – hoist the abstract structure up top.

    Shoelace is prob best on a larger monitor than my MBP (there’s a little horizontal scroll in the main body) which is confusing (and chrome wants to navigate back on two finger drag). Just checked, zooming out one notch eliminates the scroll for me… I’d prefer a smaller interface.

    The little head twist is the clicking of buttons/panels at left to preview the grid rendered at different sizes – my normal model for this is to drag the right side of the screen (chrome devtools border or FF responsive mode)… maybe clicking the panels could trigger a representative / symbolic change in the width of the main col?

    I’d love to see some big hovers on ‘duplicate’, ‘reset to full wdith’ (is that what the refresh icon does?) and the offset grippy – i missed that first time!

    a nice addition might be a get started button / popover that could offer a tour / gif / dummy data, as a blank screen might make this less accessible to newcomers…

    A peripheral value add you might consider would be offering html5 markup suggestions, poss with basic validation (eg: only one main tag per page). An outline view analogous to your left hand panels, or sweet code structure would help folk comprehend “sectioning” content and where to fit in the non semantic elements that bootstrap requires (we still often need wrappers, right! esp with nesting cols) eg section.row>article.grid-item.col-sm-4*12

    anyway, enough suggestions – they’re only coming up because shoelace is worth it :)

    thanks for the tool, and i’ve really appreciated you explanations of BS – they’re the best I’ve read. Best wishes, Tim

  • Erik Flowers

    That’s great feedback. I agree with almost all of it.

    One things to ask, is that did you see the preview button at the top? It will render your grid in a real HTML layout where you can actually drag it back and forth and see the literal size changes and responsiveness. When you hit save up at the top, it gives you a preview button. (this seems to be broken right now… not sure why).

    Sadly, the codebase is all written in Clojure, which compiles down to the clojurescript/javascript. The developer who built it all is not really available to work on it, so it’s probably as done as it’s gonna get.

  • Tim Osborn

    Ah! I don’t see preview, but that sounds like what I was looking for! Code: Yeah – I took a peak and it looks scary complex :)

  • Erik Flowers

    I’ll see if I Can get him to eyeball what is wrong. Likely has to do how we save the designs to a public github Gist… API might have changed.

    Regarding the clojurescript – that’s just compiled code, it’s javascript but not meant to be readable by a human. Clojure is the actual language pre compiled, and it’s super readable and awesome. It’s based on Lisp.

    I may just make the repo public and see if anyone ever wants to mess with it or work on it. Probably not, but oh well. Most Clojure guys are super busy and important changing the world.

  • Andreas

    Very nicely explained! Thanks!

  • Deeps

    This is so helpfull to understand the bootstrap Grid System. Thank You a bunch Erik for sharing this with us.

  • Chener

    Wow, Thank YOU!

  • Brian R Cline

    This is possibly the best description of how bootstrap grid’s system works.

    Absolutely fantastic, detailed, and useful. Love the diagrams.

  • xpera


  • Sainik Biswas

    This is better than the Bootstrap doc on grids. Thanks :)

  • Pingback: The Subtle Magic Behind Why the Bootstrap 3 Grid Works (2013) | Blog()

  • inversechi

    I to rarely comment on anything but I just felt like saying thanks for such an informative post!

  • Pingback: The Subtle Magic Behind Why the Bootstrap 3 Grid Works | The WordPress C(h)ronicle()

  • Leonid S. Knyshov

    Thank you, this should be part of Bootstrap docs. I am not original in making this statement, but it needs to be made. :)

  • Pingback: RT @Rarst: The Subtle Magic Behind Why the Bootstr… | Jtsternberg Tweets()

  • Mr Pichler

    Very good!

  • Nichochar

    Great explanation, thanks

  • Steven Garrity

    Thanks for putting this together. It would be nice to have some of this rationale in the official Bootstrap documentation. I’m going to turn this into a presentation for my co-workers. Thanks again.

  • Pingback: The Subtle Magic Behind Why the Bootstrap 3 Grid Works | Devspaper()

  • Šime Vidas

    What if you wanted the gutter between columns to be the same width as the padding to the edge of the screen? E.g. in the “Columns” screenshot, gutter = 30px, but screen edge padding = 15px. How would I achieve the same value for both? (I’m not a Bootstrap user.)

  • sadewqfwefq


  • Vonnie Hudson

    Excellent explanation! I’ve always struggled to understand this but your explanation was lucid

  • Niko Lowry

    Bootstrap has one of the most bloated grid frameworks ever. While I agree with the concept of “bootstrapping”, I feel like Twitter has interns implementing the code base.

    For example, you have a diagram pointing out the negative margins to do the padding; which is completely unnecessary and a BAD practice. negative margins, and even margins not originating from either the top or left are reserved for EXTREME circumstances and should not be the foundation of a styling framework.

    Additionally, I don’t remember the last site I did that “snapped” w breakpoints. Everything I’ve coded in the past 2 to 3 years have been fluid width, clients want their site to fill out every screen. Which makes dealing with bootstrap a nightmare.

  • lipegon

    Agreed! Thank you! :)

  • Blake Petersen

    Foundation, baby

  • Erik Flowers

    Twitter never actually had anything to do with this. It was people who worked at twitter doing it in their off time, and used it for prototyping at work.

    The margin/padding really is about making the grid work across the huge non-edge case majority. It does work, and a “bad practice’ in CSS and HTML is funny as almost everything we do in HTML and CSS is a hack and bad practice.

    Using 100% width fluid designs in bootstrap is a 1 line Less mixin.

  • Niko Lowry

    Erik so you really prefer this:
    /* Bootstrap */
    .container {
    /*for diff padding you’d have to do padding-right/padding-left or padding !important */
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;

    .row {
    /*any el that’s position absolute (i.e: img bg) will start at -15px rather than our real 0*/
    margin-right: -15px;
    margin-left: -15px;

    Instead of something like this (better example w/ cols here: ):
    .container, .row{
    *zoom: 1;

    .container:before, .container:after,
    .row:before, .row:after{
    content: ” “;
    display: table;

    .container:after, .row:after {
    clear: both;

    /*Center and external padding*/
    .container {
    margin:0 auto;
    /*now padding can easily be overwritten, instead of extra prop targeting*/
    padding:0 15px;


  • Erik Flowers

    You’re pasting in CSS that is never seen. The only things I see are my own less files. Bootstrap is a Less set of tools, I’ve never even exported CSS as un-minified since using Bootstrap and Less.

    I guess I prefer to see it as how it’s actually used – you import bootstrap.less from it’s own folder, then build your own Less for your customized layouts and designs as you see fit. Most people never need to see or know how the grid mixins and math Bootstrap uses to build the bootstrap CSS.

    So to answer your questions – I don’t prefer either. I prefer (if I ever even look at it)

    .container-fixed(@gutter: @grid-gutter-width) {
    margin-right: auto;
    margin-left: auto;
    padding-left: (@gutter / 2);
    padding-right: (@gutter / 2);
    &:extend(.clearfix all);


    .make-row(@gutter: @grid-gutter-width) {
    margin-left: (@gutter / -2);
    margin-right: (@gutter / -2);
    &:extend(.clearfix all);

    But why would anyone care about that? That’s like cracking open the jQuery source and critiquing it. Most people just want to do .onClick and .toggleClass and who cares how it works.

  • Niko Lowry

    The analogy to jQuery is totally offbase. If your event doesn’t bubble or produce an error, then all the matters is the callback. The .container, .row and every other “base” class has an impact globally on nearly every element. Do you not open dev tools to inspect css? A clear example is if you’ve ever had to position something absolute inside a row and have to use 15px instead of 0px.

    And I don’t “see” those mixins or base styles either, I have a custom reset, custom grid and global stylesheet that contains my own “bootstrap”. But just because you don’t actively see the css files, doesn’t mean you should be oblivious to what’s going on under the hood because it could cause bugs/or extra lines of code to overwrite.

    With my code example above, I was directly addressing your comment “The margin/padding really is about making the grid work across the huge non-edge case majority.” Instead of using weird margins, I showed a proof of concept how to do it while still respecting the traditional box-model.

  • Pingback: The Subtle Magic Behind Why the Bootstrap 3 Grid Works | Twittstrap()

  • judo

    Awesome post! The only thing I would have liked is accompanying code examples.

  • bestar15scopes

    Wow, what a great explanation. This is so well written and helpful. Thanks for this!

  • Lucas Bonnet

    Thank you very much for this post, it helped fix all the aberrant bugs in my application. In a few minutes, I was then able to understand the mistakes I made and fix them.

  • Joshua McDonald

    @nikolowry:disqus – Can you explain to me, outside of superfluous “its not best practice”, a practical reason why there is something wrong with bootstrap’s approach? I get a lot of opinionated best practice – a la Crockford, Resig or the entire Rails community – but not a lot of reason why… Margins work on all sides just fine – the idea to use them on top/left is simply so you dont have to think about it later… but as Erik said above, you never see that code really – its not in your FOV and frankly, you shouldn’t be dicking with the margins of the framework so the “how” of the framework should be rather unimportant to you.

    If you simply prefer your version of best practice, than by all means, do what works for you – “best practice” to me is the method that gives the client what they want, in a quality manner, in the least amount of time without sacrificing the end product. And, like everything in the modern development world, there is no de-facto “best practice” to begin with… so please dont present it as fact.

    I’m actually not a huge fan of bootstrap – I use it for prototyping, but in production prefer foundation (Bootstrap has more built-ins, its like making wireframes for prototypes is where it shines) … but aside from the minor nitpick of rows afecting position absolute on children (and I say minor because for me, “best practice” has always been to have the container of something I absolute position be something I created – i just dont absolute a direct child in a .row), I really dont see any actual, quantifiable reason to say its flat wrong, other than you just dont personally like it

  • Pingback: Developer’s & Diminishing Motives()

  • Pingback: Bookmarks for July 16th | Chris's Digital Detritus()

  • Pingback: TIWEN()

  • superkershaw

    Hi Erik, I also really appreciate this well written article, I was wondering if you have any experience with foundation and would have any interest in analysis their grid system as well? From what I can tell it operates similarly in concept, but I’ve found myself struggling with horizontal scroll bars on the window and such… For example, to make the grid full window width in foundation requires your own CSS.

  • Todd Gallimore

    This has finally cleared it up. Thank you! I was just getting confused on how the gutters works. But negative margin on the row makes total sense. Thanks again!

  • Bert

    Thank You!

  • Pingback: Designing with Bootstrap – SALMAN SAYS()

  • mue

    Good explanation. Thanks!

  • Pingback: Quick one: good explanation of Bootstrap 3 grids | Chavez Coding Notes()

  • Pingback: Infovore » Links for July 21st()

  • Pingback: Joe White’s Blog » Blog Archive » Bootstrap grid system explained()

  • Pingback: Issue #10 – Tales from the Front End()

  • Adam

    Great explanation, thank you. Much clearer now!

  • Pingback: Using a Grid to Design a Website - CFX()

  • larry

    What a service you have provided. I don’t know how you find the time, but thank you!

  • Pingback: Fresh Tutorials and Articles for Web Developers: July 2014 |

  • Ahmet


  • Erik Reppen

    It’s classic modern web UI development. Take a good CSS technique and turn into a gargantuan hammer to whomp everything with. Has it occurred to anyone that a layout is much more easily modified when padding is just on the container and rare exceptions get the negative margins? What do you do when suddenly somebody decides it needs to be 20px spacing and there you are with all these pointless, redundant, semantically useless containers in your HTML to tweak? LESS vars for the overrides I suppose. Bend one hammer back into shape with another hammer.

    That’s great until until your file watchers in Docpad start crapping out in OS-X under the strain of all the LESS, CoffeeScript, and templating being observed forcing you to relaunch the server every single time whereas with a bit of sense you could have written maintainable CSS in the first place and simply reloaded your browser as we’ve been doing for years.

    So yes, this is indeed neat but what Bootstrap has done with it is also heavy-handed and adds needless weight to the DOM. I noticed a simple JQ animation in an HTML heavy page stuttering the other day. Granted, JQ never updated for requestAnimationFrame but it was the kind of thing that would have worked fine in IE6 if there wasn’t as much needless weight being put on the renderer/CSS reflow as there is. Aren’t we supposed to be writing for mobile now?

    But seriously, why are we throwing the kitchen along with the sink at every problem? For years, I have laughed at all of the stupid dependency and config crap Java and .NET devs have had to put up with when it didn’t impact my workflow but now the joke’s on us. Why are we doing this to ourselves?

  • Steve Young

    Great explanation – and the images were brilliant. Thanks!

  • qamar

    wonderful explanation! Makes me more confident when working with bootstrap

  • singularity

    just wanted to express my thanks for the explanation. definitely helped me out. Not sure why I couldn’t completely get it from the official bootstrap docs

  • GrabbleStacklr

    Doesn’t work if you want to change the margin/padding on demand, because then you have to alter for each screen size, and for each iteration of the container/row/col. Absolute nightmare if you want a design that isn’t completely “box-y”.

  • Jack

    This cleared up a few questions I had. This post is great! Thanks :D

  • Alexis Duran

    Thanks awesome article. Very useful and easy to read.

  • miphe

    Cheers, great explanation!

  • Pingback: The Birth of the Shoelace Bootstrap Grid Builder | Experience Design at Hello Erik()

  • Lin

    The best ever explained Bootstrap3:))

  • Shawn

    I believe that “Most People” using bootstrap are only using CSS and not LESS/SASS – at least at the “lower end” of development.

  • punund

    complimentary –> complementary

  • Will Schenk

    This was a great explaination, and it was helpful when I was gathering things together for my article on Advanced Grid Tricks. Thanks!

  • Anirban Bhattacharya

    Great explanation… Thanks Erik

  • accman

    Thanks Erik! for this wonderful article. I think you are a born teacher. You convey every bit in great detail that even an idiot will understand it easily.

  • Donna McMaster

    Thank you so much! I’ve been trying to explain things to a junior developer but I had only experience and my gut to go by. So great to have a clear explanation of WHY and not just how.

  • Erik Flowers

    Thanks. I am glad you noticed the why and not just the how. It’s a good lesson in the broken-ness of HTML as a design language as well.

  • Can Yurdaer

    Nice information, thank you for share.

  • Kim Pomares

    Been struggling to understand how to design responsive layouts properly with containers, etc. In a few words, you were able to make everything make perfect sense in a way I can apply right away. Thanks

  • Pingback: twitter bootstrap kitchen sink - Search Yours()

  • dphunt

    just great.

  • Charles Duval

    Hi Erik,

    First off, thanks for the clarification and shining light on some rather complex issues when approaching design with Bootstrap. I’ve been using this framework for a while now,and at the moment I am working a pretty large project with it and continue to have a small issue. This problem is really starting to hurt in a big way. I have my rows set appropriately , and I have 4 columns in my row. Simple markup —

    So when I go to add an additional new column , my entire site shifts a bit. I have even just created a new row and repeated this to see if it would fix it but I have no clue whats going on.
    Maybe we can chat elsewhere about this because this will help me out more than you now.
    Thanks .


  • Erik Flowers

    You need a row around your column 12. You must go row col row col etc. Fix that and try again and report your results.

    ——row here—–

    —–close row here—–

    Also at xs this will look weird. 3 cols in a row and then another oddball hanging on the next row.

  • Charles Duval

    Okay so now I have those in place, I did see a change in the layout, but when I want to add a new column and have it continue down I have the problem still…

    ——row here—–

    (New Column – entire page shifts)
    —–close row here—–

    The xs has a css override to be 100% at 319px which has been helpful fror Iphone 5 portrait and landscape and maintain columns on Ipad landscape and portrait. Appreciate your feedback.

  • Erik Flowers

    I don’t get what you’re trying to do. You’re putting columns into rows that add up to more than 12. It’s a 12 column grid. So at XS, you’re 20 columns wide, and at md you’re 15 columns wide.

    What is your use case for needing 20/15 columns? It’s possible to put more columns in than 12, but they typically need to add up to some multiple of 12.

    Watch this animated gif and see how the

    1 2 3
    4 5 6

    columns go from 2 even rows, to

    1 2 3 4
    5 6

    What do you mean by “page shifts”?

  • Charles Duval

    Okay so at the moment I am designing an interface for a web app that can be used to share and add content such articles, stories or create groups etc. I am just doing front-end design with bootstrap for the web. Then the client is going to take these pages and wrap it in an app and have it for IOS.

    I am currently designing the main pages for this app, The user can create article groups, and have people add them to their streams or follow the group creator to see the other content they have shared. It will basically look like a library of columns that you can click and read articles, remove or add them privately to your stream or share them publicly.

    For the page shifting, So for a better explanation, even when I add an entire new row , with the appropriate column set up, my entire page moves to the left a couple pixels. This only happens once, and that’s after I create a whole new row to have 4 new columns. I took a screen shot to show you what happens.

  • Charles Duval

    I believe I have discovered the problem…
    I have been using the “thumbnail” class to help mockup the main app page, and It was causing an issue with the columns with my css overrides. I believe I was giving it additional padding or something causing it to push-out of the rows or something. Not sure what exactly, but it works now. Thanks for the help.

  • Nikhil Fadnis

    Hi erik, thanks for the great explanation!
    I have a question. How does bootstrap resolve which column size(xs, sm, md, lg) to use depending on the size of the display?

    For example in the code below, how does bootsrap know which column size to use when used on different devices?

    ——some content——-

  • Erik Flowers

    So you have to remember that Bootstrap 3 is coded mobile first – that means that the CSS is written as if only phones exist – then, you layer on more CSS as the screens get BIGGER, and Bootstrap decided to call that sm, md, and lg.

    So – all columns default as 100% width. This means on a phone, the only way to set a default column to anything other than 100% is by using the xs class. So, col-xs-6 and col-xs-6 will give you 2 side by side columns on a phone.

    Then, Bootstrap has breakpoints for the .container at screen widths that get progressively larger. So at 720px the styles are activated from the media query for “sm”, at 940px for “md” and at 1140px for “lg”. That is how it knows.

    So in your example, you would only need to use 1 “col-*-12” as saying you want a 12 column at xs means all the rest inherit it UP. Or, you can say you want a col-sm-6, which would be a 6 width column at the “sm” breakpoint at 720px. But then you could say you want it to be a col-md-8 at the “md” breakpoint of 940px.

    So by using the CSS media queries, bootstrap will change the column size to whatever you want, and you don’t have to be redundant.

    You can easily see this in action using my Bootstrap grid teacher here:

    Notice how you can change the column sizes in the GUI by dragging them around and then changing them with the left-hand bar, and then see how the HTML changes. Then you can use the preview mode (if you’re in Chrome) and watch it change live.

  • Nikhil Fadnis

    Thank you very much. This has made my understanding of bootstrap a hell lot better. Cheers!

  • Vojtěch Buba

    Thank you for this article, it solved my problem.

  • Pingback: Hey webmaster, I’m mobile! I wanna see mobile friendly pages! | İlker Üstüner()

  • Pingback: Bootstrap container-fluid not spanning the entire width of the viewport? Here’s a fix! | Hacking Happy()

  • Soren Azatantz

    Appreciated the clarity. Thanks!

  • Girl Eat World

    Thank you so much Erik! i echo everyone else in that this post is extremely useful. Will be watching your blog from now on

  • Sébastien Axinté

    Thank you so much Erik, nice explanation!

    Now I’m wondering the following: why not get rid of the negative margins and the container?
    It should work as expected. But I know what you are thinking about right now: Grid Nesting.

    But we can fix this as well:
    The idea is to control the padding gutters using a CSS class. If you always add the gutter class on the very last column children of your nested grid, it’s gonna work.

    Because I wasn’t fan of the negative margins I build my own grid based on the Bootstrap and Zurb grid philosophy.
    Here is the Github repo:
    Here is a demo Grid:
    Here is a nested demo Grid:

    And here is a demo in a real production environnement:
    Please tell me your thoughts about this! Thanks

  • Erik Flowers

    Do you mean negative margin on the .row? The container has padding.

    I am not sure I can visualize what you mean. I looked at the grid demo, and I don’t see the disadvantage of Bootstrap’s method. Bootstrap’s method works extremely well across lots of use cases, so I don’t don’t know what changing it would offer. But, you might have cases that you do need to remove the container, but it just seems to accomplish the same thing, right?

    Anyways, I am glad you’re looking into new ways and trying things, that is what keeps this philosophy of CSS frameworks great.

  • damnmaxims

    Thank you for this article, very informative and fun to read. You have a typo in the second image under the “Nesting” section. You say, “.row’s negative padding”, you mean “.row’s negative margin”

  • Pingback: Challenges creating a grid system similar to Bootstrap 3.3.5()