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

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

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.

160 Responses

  1. Bootstrap 3 Grid Introduction | UX at Hello Erik

    […] 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. […]

  2. Bootstrap 3 Less Workflow Tutorial | UX at Hello Erik

    […] (Read the Part 1 about a Bootstrap Grid Introduction here Bootstrap 3 Grid Introduction Tutorial and The Subtle Magic Behind Why the Bootstrap 3 Grid Works.) […]

  3. Gonzalo Suez
    Gonzalo Suez November 10, 2013 at 8:49 pm |

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

  4. nedux
    nedux November 13, 2013 at 2:24 pm |

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

  5. Daniel Pinciuc
    Daniel Pinciuc November 17, 2013 at 1:52 am |

    awesome, dude!

  6. Shinekhuu D
    Shinekhuu D November 18, 2013 at 6:32 am |

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

  7. Philip Holly
    Philip Holly December 4, 2013 at 7:15 am |

    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?

  8. The Conscious Life
    The Conscious Life December 16, 2013 at 7:31 pm |

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

  9. dylanvalade
    dylanvalade December 21, 2013 at 8:47 am |

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

  10. | msarm
  11. Karl
    Karl January 15, 2014 at 3:09 am |

    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.

  12. Kristina Lemasson
    Kristina Lemasson January 19, 2014 at 9:12 pm |

    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!

  13. Bootstrap 3. Grid system | Yaiza Bailén

    […] I know it is quite hard to understand the css but I found a very good article explainig it by Erik Flowers, so let me just put the link here. […]

  14. Erik Flowers
    Erik Flowers January 29, 2014 at 6:41 pm |

    All killer, no filler. 24/7yolo.

  15. fakeartist
    fakeartist February 1, 2014 at 8:05 am |

    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.

  16. Erik Flowers
    Erik Flowers February 1, 2014 at 8:32 am |

    You can do it like shown here:

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

  17. WoodyGrape
    WoodyGrape February 9, 2014 at 10:39 am |

    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

  18. John Counsel
    John Counsel February 24, 2014 at 1:14 pm |

    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

  19. Whit
    Whit February 27, 2014 at 2:19 pm |

    nice work, Erik!

  20. Joseph Rex
    Joseph Rex March 10, 2014 at 4:27 am |

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

  21. Erik Flowers
    Erik Flowers March 12, 2014 at 1:15 pm |

    It’s the little things.

  22. darb
    darb March 14, 2014 at 2:15 pm |

    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

  23. Erik Flowers
    Erik Flowers March 14, 2014 at 4:18 pm |

    i dont see this anywhere. browser?

  24. Royce Lithgo
    Royce Lithgo March 17, 2014 at 10:33 pm |

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

  25. Royce Lithgo
    Royce Lithgo March 19, 2014 at 1:09 am |

    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.

  26. Erik Flowers
    Erik Flowers March 19, 2014 at 9:25 am |

    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:

  27. Royce Lithgo
    Royce Lithgo March 19, 2014 at 8:03 pm |

    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.

  28. david
    david March 22, 2014 at 9:03 pm |

    Best explanation and set of illustrations I’ve seen!

  29. CNARIO
    CNARIO April 3, 2014 at 5:24 am |

    I see it that way on my playbook.

  30. Ji Sames
    Ji Sames April 4, 2014 at 3:32 pm |

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

  31. Fred
    Fred April 8, 2014 at 10:12 am |

    This is an awesome review. Thanks for sharing!

  32. André Moura
    André Moura April 8, 2014 at 11:41 am |

    Muito bom.

  33. Right One Design
    Right One Design April 10, 2014 at 6:59 am |

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

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

    […] Fonte: […]

  35. Jean-Luc Esser
    Jean-Luc Esser April 11, 2014 at 4:34 am |

    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 !

  36. Erik Flowers
    Erik Flowers April 11, 2014 at 11:30 am |

    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.

  37. rafark
    rafark April 19, 2014 at 3:37 pm |

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

  38. gwhosubex
    gwhosubex April 20, 2014 at 11:41 pm |

    Now I have another great example of clear teaching to model

  39. Orlando
    Orlando April 22, 2014 at 9:45 am |

    Wow! Simple and elegant explanation!

  40. Filippo Mangione
    Filippo Mangione April 26, 2014 at 1:15 am |

    Simple and comprehensive explaination. Thanks.

  41. Peter Barnes
    Peter Barnes April 28, 2014 at 10:38 am |

    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!

  42. JamesNV
    JamesNV May 2, 2014 at 2:03 am |

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

  43. Tharanga Nuwan Kumara
    Tharanga Nuwan Kumara May 4, 2014 at 2:04 am |

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

  44. snekse
    snekse May 13, 2014 at 6:27 am |

    What did you use for your wireframe images?

  45. Erik Flowers
    Erik Flowers May 16, 2014 at 8:40 am |

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

  46. Dmitri
    Dmitri May 31, 2014 at 7:01 am |

    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.

  47. Erik Flowers
    Erik Flowers May 31, 2014 at 11:19 am |

    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

  48. Dmitri
    Dmitri June 1, 2014 at 3:21 am |

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

  49. Bootstrap 3 grid system illustrated & explained | just some notes

    […] Bootstrap 3 grid system illustrated & explained […]

  50. Tim Osborn
    Tim Osborn June 2, 2014 at 10:33 am |

    wow.. shoelace rocks!

  51. Erik Flowers
    Erik Flowers June 2, 2014 at 10:37 am |

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

  52. Tim Osborn
    Tim Osborn June 2, 2014 at 11:37 am |

    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

  53. Erik Flowers
    Erik Flowers June 2, 2014 at 4:31 pm |

    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.

  54. Tim Osborn
    Tim Osborn June 2, 2014 at 6:24 pm |

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

  55. Erik Flowers
    Erik Flowers June 2, 2014 at 6:32 pm |

    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.

  56. Andreas
    Andreas June 5, 2014 at 1:10 am |

    Very nicely explained! Thanks!

  57. Deeps
    Deeps June 11, 2014 at 4:44 am |

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

  58. Chener
    Chener June 12, 2014 at 12:04 am |

    Wow, Thank YOU!

  59. Brian R Cline
    Brian R Cline June 27, 2014 at 11:46 am |

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

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

  60. xpera
    xpera July 12, 2014 at 10:04 am |


  61. Sainik Biswas
    Sainik Biswas July 14, 2014 at 2:01 pm |

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

  62. The Subtle Magic Behind Why the Bootstrap 3 Grid Works (2013) | Blog

    […] The Subtle Magic Behind Why the Bootstrap 3 Grid Works (2013) […]

  63. inversechi
    inversechi July 16, 2014 at 12:49 am |

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

  64. The Subtle Magic Behind Why the Bootstrap 3 Grid Works | The WordPress C(h)ronicle

    […] visit Helloerik […]

  65. Leonid S. Knyshov
    Leonid S. Knyshov July 16, 2014 at 1:39 am |

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

  66. RT @Rarst: The Subtle Magic Behind Why the Bootstr… | Jtsternberg Tweets

    […] RT @Rarst: The Subtle Magic Behind Why the Bootstrap 3 Grid Works… […]

  67. Mr Pichler
    Mr Pichler July 16, 2014 at 3:57 am |

    Very good!

  68. Nichochar
    Nichochar July 16, 2014 at 4:49 am |

    Great explanation, thanks

  69. Steven Garrity
    Steven Garrity July 16, 2014 at 5:15 am |

    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.

  70. The Subtle Magic Behind Why the Bootstrap 3 Grid Works | Devspaper

    […] The Subtle Magic Behind Why the Bootstrap 3 Grid Works […]

  71. Šime Vidas
    Šime Vidas July 16, 2014 at 5:42 am |

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

  72. sadewqfwefq
    sadewqfwefq July 16, 2014 at 5:43 am |


  73. Vonnie Hudson
    Vonnie Hudson July 16, 2014 at 6:15 am |

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

  74. Niko Lowry
    Niko Lowry July 16, 2014 at 8:23 am |

    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.

  75. lipegon
    lipegon July 16, 2014 at 9:22 am |

    Agreed! Thank you! :)

  76. Blake Petersen
    Blake Petersen July 16, 2014 at 10:59 am |

    Foundation, baby

  77. Erik Flowers
    Erik Flowers July 16, 2014 at 11:06 am |

    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.

  78. Niko Lowry
    Niko Lowry July 16, 2014 at 12:48 pm |

    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;


  79. Erik Flowers
    Erik Flowers July 16, 2014 at 12:58 pm |

    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.

  80. Niko Lowry
    Niko Lowry July 16, 2014 at 1:20 pm |

    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.

  81. The Subtle Magic Behind Why the Bootstrap 3 Grid Works | Twittstrap

    […] View Tutorial […]

  82. judo
    judo July 16, 2014 at 5:51 pm |

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

  83. bestar15scopes
    bestar15scopes July 16, 2014 at 6:22 pm |

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

  84. Lucas Bonnet
    Lucas Bonnet July 16, 2014 at 7:46 pm |

    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.

  85. Joshua McDonald
    Joshua McDonald July 16, 2014 at 8:35 pm |

    @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

  86. Developer’s & Diminishing Motives

    […] The Subtle Magic Behind Why the Bootstrap 3 Grid Works […]

  87. Bookmarks for July 16th | Chris's Digital Detritus

    […] The Subtle Magic Behind Why the Bootstrap 3 Grid Works | Experience Design at Hello Erik – […]

  88. TIWEN
    TIWEN July 16, 2014 at 11:04 pm |

    […] The Subtle Magic Behind Why the Bootstrap 3 Grid Works | Experience Design at Hello Erik. […]

  89. superkershaw
    superkershaw July 17, 2014 at 12:41 am |

    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.

  90. Todd Gallimore
    Todd Gallimore July 18, 2014 at 6:11 am |

    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!

  91. Bert
    Bert July 18, 2014 at 3:46 pm |

    Thank You!

  92. Designing with Bootstrap – SALMAN SAYS

    […] layout structures (e.g. the Grid system) works, check out this article which breaks down the subtle magic behind Bootstrap’s grid system. It’s a bit advanced reading, but it is interesting to learn how it’s actually done, in […]

  93. mue
    mue July 20, 2014 at 9:42 am |

    Good explanation. Thanks!

  94. Quick one: good explanation of Bootstrap 3 grids | Chavez Coding Notes

    […] This page has a good explanation of the Bootstrap 3 12-unit grid and how to track down issues with displays. I need to remember to look at this again later. […]

  95. Infovore » Links for July 21st
    Infovore » Links for July 21st July 21, 2014 at 3:00 am |

    […] The Subtle Magic Behind Why the Bootstrap 3 Grid Works | Experience Design at Hello Erik Very clear explanation of precisely what's going on inside the Bootstrap grid – with diagrams, and also clear explanations of the roles of each styling class. The clarification of push/pull is particularly useful. (tags: css grid html bootstrap layout web ) […]

  96. Joe White’s Blog » Blog Archive » Bootstrap grid system explained

    […] of my co-workers ran across an article called “The Subtle Magic Behind Why the Bootstrap 3 Grid Works“. It’s worth mentioning here, partly so I have a good place to find the link […]

  97. Issue #10 – Tales from the Front End

    […] development environment that rivals legacy desktop IDEs on performance, feature set, and usability.The Subtle Magic Behind Why the Bootstrap 3 Grid WorksHow containers, rows, and columns, work together for building precise and responsive layouts.CSS […]

  98. Adam
    Adam July 30, 2014 at 3:49 am |

    Great explanation, thank you. Much clearer now!

  99. Using a Grid to Design a Website - CFX

    […] appetizer then consider these templates your meat and potatoes; consider this article explaining how the Bootstrap grid works your knife and fork. Your clients are waiting, so dig […]

  100. larry
    larry July 30, 2014 at 9:30 pm |

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

  101. Fresh Tutorials and Articles for Web Developers: July 2014 |

    […] The Subtle Magic Behind Why the Bootstrap 3 Grid Works […]

  102. Ahmet
    Ahmet August 7, 2014 at 1:18 am |


  103. Erik Reppen
    Erik Reppen August 8, 2014 at 6:52 am |

    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?

  104. Steve Young
    Steve Young August 10, 2014 at 6:06 pm |

    Great explanation – and the images were brilliant. Thanks!

  105. qamar
    qamar August 13, 2014 at 2:04 pm |

    wonderful explanation! Makes me more confident when working with bootstrap

  106. singularity
    singularity September 6, 2014 at 8:06 pm |

    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

  107. GrabbleStacklr
    GrabbleStacklr September 9, 2014 at 10:17 pm |

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

  108. Jack
    Jack September 10, 2014 at 9:12 am |

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

  109. Alexis Duran
    Alexis Duran September 12, 2014 at 7:20 am |

    Thanks awesome article. Very useful and easy to read.

  110. miphe
    miphe September 16, 2014 at 8:32 am |

    Cheers, great explanation!

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

    […] The Subtle Magic Behind Why the Bootstrap Grid Works […]

  112. Lin
    Lin September 28, 2014 at 6:57 am |

    The best ever explained Bootstrap3:))

  113. Shawn
    Shawn October 5, 2014 at 11:29 am |

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

  114. punund
    punund October 19, 2014 at 1:39 am |

    complimentary –> complementary

  115. Will Schenk
    Will Schenk November 3, 2014 at 2:52 pm |

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

  116. Anirban Bhattacharya
    Anirban Bhattacharya November 27, 2014 at 5:11 am |

    Great explanation… Thanks Erik

  117. accman
    accman December 16, 2014 at 3:35 am |

    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.

  118. Donna McMaster
    Donna McMaster December 18, 2014 at 5:32 pm |

    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.

  119. Erik Flowers
    Erik Flowers December 18, 2014 at 9:37 pm |

    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.

  120. Can Yurdaer
    Can Yurdaer December 25, 2014 at 12:01 am |

    Nice information, thank you for share.

  121. Kim Pomares
    Kim Pomares December 26, 2014 at 9:30 am |

    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

  122. twitter bootstrap kitchen sink - Search Yours

    […] The subtle magic behind why the bootstrap 3 grid works […]

  123. dphunt
    dphunt January 22, 2015 at 12:30 pm |

    just great.

  124. Charles Duval
    Charles Duval February 15, 2015 at 1:52 pm |

    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 .


  125. Erik Flowers
    Erik Flowers February 15, 2015 at 2:17 pm |

    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.

  126. Charles Duval
    Charles Duval February 15, 2015 at 2:44 pm |

    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.

  127. Erik Flowers
    Erik Flowers February 15, 2015 at 2:54 pm |

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

  128. Charles Duval
    Charles Duval February 15, 2015 at 3:10 pm |

    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.

  129. Charles Duval
    Charles Duval February 15, 2015 at 3:57 pm |

    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.

  130. Nikhil Fadnis
    Nikhil Fadnis February 19, 2015 at 11:20 pm |

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

  131. Erik Flowers
    Erik Flowers February 20, 2015 at 9:39 am |

    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.

  132. Nikhil Fadnis
    Nikhil Fadnis February 20, 2015 at 10:02 pm |

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

  133. Vojtěch Buba
    Vojtěch Buba March 25, 2015 at 5:21 am |

    Thank you for this article, it solved my problem.

  134. Hey webmaster, I’m mobile! I wanna see mobile friendly pages! | İlker Üstüner

    […] If you are confused about Bootstrap grid system check this great article explaining the magic behind why the Bootstrap 3 grid works. […]

  135. Bootstrap container-fluid not spanning the entire width of the viewport? Here’s a fix! | Hacking Happy
  136. Soren Azatantz
    Soren Azatantz April 23, 2015 at 12:24 am |

    Appreciated the clarity. Thanks!

  137. Girl Eat World
    Girl Eat World August 17, 2015 at 9:36 am |

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

  138. Sébastien Axinté
    Sébastien Axinté September 14, 2015 at 2:45 am |

    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

  139. Erik Flowers
    Erik Flowers September 14, 2015 at 10:13 am |

    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.

  140. damnmaxims
    damnmaxims October 24, 2015 at 7:23 am |

    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”

  141. Challenges creating a grid system similar to Bootstrap 3.3.5

    […] And here is a nice article explaining how that gutter is created from padding and having negative 15px on the horizontal margins on the .row (scroll down to “Column” section): […]

  142. benlind
    benlind February 13, 2016 at 12:23 pm |

    Awesome explanation. I would love a description of the effects of the different column widths in different viewport sizes. The media query class stacking is confusing.

  143. Jason Maggard
    Jason Maggard March 15, 2016 at 11:20 am |

    I just had to send a trainee a link on how Bootstrap grids work… Awesome stuff man. Very well explained AND presented. Kudos to you sir.

  144. Erik Flowers
    Erik Flowers March 15, 2016 at 2:11 pm |

    This is by far my favorite technical article I’ve written. Even when writing it, I had to really tech myself why it worked, or reverse-engineer the decisions the developers made to make it work how it does.

  145. Aaron
    Aaron March 27, 2016 at 2:24 am |

    Excellent and very helpful explanation – I was going slowly mad trying to work out why my column was not indented 15 px from the left margin… and why the whole responsive layout went wiggy if I put a margin in myself.

  146. Carol
    Carol April 1, 2016 at 8:25 am |

    The negative margin approach on the row is simpler, and with nesting the columns become the container for the nested rows so there’s not “two freaking contains with every column” set.

  147. Carol
    Carol April 1, 2016 at 9:03 am |

    Eric, thank you so much for this in depth article that I’ve referenced so many times when answering Bootstrap questions on StackOverflow.

    The are 2 questions that continually arise (and cause controversy!) when people use the Bootstrap grid. I would like to offer clarification on these common questions/misconceptions..

    1) Can a single row contain more than 12 columns units?

    Yes, yes, yes. Column “wrapping” is one of Bootstrap’s most powerful RWD features. As stated in the Bootstrap docs: [“If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line”]( There are many responsive scenarios where it’s necessary to have columns exceeding 12 in a single .row element. Placing more than 12 col units per row is a common scenario when creating col-* dynamically. It can also be useful to go over 12 columns when you have an unknown amount of columns created dynamically, they will just wrap onto the next line, as they are floated left.

    2) Why does the row have negative margins?

    You did a nice job of explaing this when you said, “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”. However, people still question “why not just adjust the padding of the first/last cols”? Well, there are many reasons, and I just want to enumerate them here so people understand. Here’s why the Bootstrap row uses negative margins instead of adjusting the first/last columns:

    1 – The CSS is simpler/faster. All cols must be in rows, therefore the negative margin is simply adjusted in one place– on the row. Adding first/last CSS rules on the column classes or use of wildcard selectors would be slow.
    2 – [Responsive stacking breaks]( A very bad things happens when the cols are stacked vertically on a small device screen (eg; smartphone) and the first/last col padding has been adjusted.
    2 – [Column wrapping]( (as explained before: more than 12 units per row) would break if we adjusted padding on only the first/last columns. As the layouts adjust for each responsive breakpoint there is no longer a simple way to determine the leftmost and rightmost columns.
    4 – [Column ordering breaks]( When the push and pull classes are used to switch the column positions there is a similar problem since our leftmost column is now visually reversed with out rightmost columns.

    Anyway, that’s my 2 cents and thanks again for your article! I’m looking forward to Bootstrap 4.

  148. Erik Flowers
    Erik Flowers April 1, 2016 at 9:12 am |

    Regarding item 1), you need to smartly include the column resets

    Otherwise you’ll run into random occurrences where the columns float weird when there are more than 12 numerical rows in one breakpoint, but then less in another. Hard to explain, but you do need to use those clearing divs.

  149. Carol
    Carol April 1, 2016 at 9:22 am |

    Yes, and you don’t need the clearfix resets if your columns in known height (I know that often not the case) and everything on the page is in single row. I assume you meant more than 12 numerical columns in one breakpoint? Also, I should’ve clarified that more than 12 units per row is not recommended when nesting columns

  150. Julian Jupiter
    Julian Jupiter April 14, 2016 at 9:28 pm |

    Nice explanation! Now I understand Bootstrap grid.

  151. Don
    Don May 4, 2016 at 7:47 pm |

    I agree with Sebastian, the negative margin is a kludge that shouldn’t have been used buty seems to work mostly ok. I was working on a Bootstrap shopping cart template the other day and the format shat itself with side columns moving from the right to the left, with no reason why.
    The whole negative margin is a horrible design, leave gaps, is unpredictable on some older browser and devices and seems to work because it’s a hack for incompetent design. The guys who develop bootstrap and other responsive frameworks are web developers and designers, not programmers and analysts. They got it wrong and your apologies for this convoluted setup in your article just panders to bad design.

  152. ljnissen
    ljnissen June 16, 2016 at 10:19 am |

    Very nice explanation of the Bootstrap grid. Have you got any recommended reading about Bootstrap and SASS/LESS or have you published anything yourself?

  153. Erik Flowers
    Erik Flowers June 16, 2016 at 10:20 am |
  154. Jason Judge
    Jason Judge July 7, 2016 at 1:07 am |

    The official documentation does not actually explain how it works or why you do things a certain way *at all*. It’s okay as a reference, but useless for understanding what underlies the grid system. As a result, the web is littered with examples that are plain wrong. Love this article.

  155. Jason Judge
    Jason Judge July 7, 2016 at 1:15 am |

    It’s not even a gotcha. It’s the whole point of rows – rows are what you put columns into :-)

  156. Avinash Deshmukh
    Avinash Deshmukh July 14, 2016 at 3:27 am |

    Can we stack container-fluid and containers above each other ( in no particular order) to create a lengthy one page layout …or we are just supposed to use it as a universal wrapper?

  157. Erik Flowers
    Erik Flowers July 14, 2016 at 7:14 am |

    Containers can be stacked on a page and even wrapped inside divs to create a fixed interior layout inside of a full width wrapper for background colors, etc.

  158. James Counter
    James Counter January 10, 2017 at 10:05 am |

    Fantastic article. Very well put together and love the illustrations :-).

  159. Michael Harper
    Michael Harper January 13, 2017 at 1:06 pm |

    Very useful article, I finally know why rows have a -15px margin!

  160. Erik Flowers
    Erik Flowers January 13, 2017 at 1:11 pm |


Leave a Reply

You must be logged in to post a comment.