User Experience at Hello Erik

The Subtle Magic Behind Why the Bootstrap 3 Grid Works

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.

Container

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.

image-1
Row

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.

image-2

Column

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.

image-3

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.

image-4

Nesting

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:

image-5

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.

image-6

Offsets

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.

image-7

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.

image-8

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 docomplementary inverses, if you push a column to the right, you’ll almost always be pulling a column to the left a complementary distance.

image-9

 

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.

image-11

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.

image-12

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.

image-13

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

  • http://www.gsuez.cl 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?

  • http://theconsciouslife.com/ The Conscious Life

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

  • http://www.dylanvalade.com/ dylanvalade

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

  • Pingback: http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works | 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.

  • http://kristinalemasson.com/ 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()

  • http://www.helloerik.com/ 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.

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

    You can do it like shown here:
    http://www.helloerik.com/bootstrap-3-grid-introduction#fluid

    .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

  • http://johncounsel.biz 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

  • http://www.helloerik.com/ 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

  • http://www.helloerik.com/ 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.

  • http://www.helloerik.com/ 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 Shoelace.io, you can sorta get a visual of how it works in the editor and also in the preview: http://shoelace.io/#HQNLMLHL

  • 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 Shoelace.io is brilliant. Easiest way to get a handle on all this.

  • david

    Best explanation and set of illustrations I’ve seen!

  • CNARIO

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

  • http://www.rightonedesign.co.uk/ 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 bootstrap.com/css), 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 !

  • http://www.helloerik.com/ 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…

  • http://www.gastronomicfightclub.com/ snekse

    What did you use for your wireframe images?

  • http://www.helloerik.com/ 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.

  • http://www.helloerik.com/ 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: http://jsbin.com/xeniyi/1/edit. 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()

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

    wow.. shoelace rocks!

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

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

  • http://memeLab.com.au/ 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

  • http://www.helloerik.com/ 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 Shoelace.io 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.

  • http://memeLab.com.au/ 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 :)

  • http://www.helloerik.com/ 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

    superb!!!

  • http://www.downloadcrunch.com/ 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()

  • http://www.knyshov.com/ 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()

  • http://www.edpichler.com/ 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()

  • http://webplatformdaily.org Š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

    dd

  • http://www.fixedbyvonnie.com/ 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! :)

  • http://niteodesign.com/ Blake Petersen

    Foundation, baby

  • http://www.helloerik.com/ 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: http://jsfiddle.net/nikolowry/7JnrR/ ):
    /*Clearfix*/
    .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;
    }

    .row{
    display:block;
    }

  • http://www.helloerik.com/ 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);
    }

    or

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

  • http://toddgallimore.com/ 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()

  • http://emergingtruths.com/ 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 | Splashnology.com()

  • Ahmet

    Adamsın

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

  • http://flashcard101.com/ 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

  • http://willschenk.com 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! http://willschenk.com/bootstrap-advanced-grid-tricks

  • Anirban Bhattacharya

    Great explanation… Thanks Erik