Why the Bootstrap 3 Grid Works (2013)

Its worth pointing out that this all works because of the rule:<p>* { box-sizing: border-box; }<p>This rule enables you to set a % width of a column and specify a padding in pixels without pushing the width of the columns beyond the 100%.<p>(I spent ages trying to replicate the bootstrap grid system and just couldn&#x27;t get it to work until I discovered this rule!)

I came up with this (in relation to Bootstrap) in 2011: <a href="http://csswizardry.com/2011/08/building-better-grid-systems/" rel="nofollow">http:&#x2F;&#x2F;csswizardry.com&#x2F;2011&#x2F;08&#x2F;building-better-grid-systems&#x2F;</a><p>This then became the basis for CSS Wizardry Grids: <a href="http://csswizardry.com/2013/02/introducing-csswizardry-grids/" rel="nofollow">http:&#x2F;&#x2F;csswizardry.com&#x2F;2013&#x2F;02&#x2F;introducing-csswizardry-grids...</a>

Wow - I wish I read this a year ago. Would&#x27;ve saved hours of frustration. My #1 gotcha was the issue where the page would allow horizontal scrolling with nothing on the sides. Turns out it was just because I hadn&#x27;t properly added containers&#x2F;rows.

I&#x27;m the author of this blog post. If you want to talk more or ask specific questions on problems you have or how to do certain things with the Less or grid, post it here or on the disqus comments on the article and I&#x27;ll answer every question I get.

Best description of the messy state of HTML: hacking a flowing document markup language to implement GUI. Why couldn&#x27;t we just get all the nice XAML&#x2F;WPF containers in HTML5? Instead we get one more way of delivering streaming video. Most developers have to deal with layouts - let&#x27;s focus on fixing that instead.

I have unknowingly used container inside container before and it has acted funky. Now i understand why. I also wondered why not just stuff a row and col class into the same div tag instead of nesting div tags. This article clears it up.<p>I wanted to explore foundation and uikit but always keep coming back to Bootstrap. It has proven an invaluable item in my toolbox. Its nice to understand the underlying reasons.

Incredibly well written post about why the Bootstrap 3 grid works, without getting stuck in the technical details of how it works.

Bootstrap&#x27;s grid really is nice. I really prefer Bootstraps grid over something like Bourboun&#x27;s Neat grid system[0] where I have to pollute my CSS with include statements.<p>I&#x27;ve also been looking into <a href="http://purecss.io/" rel="nofollow">http:&#x2F;&#x2F;purecss.io&#x2F;</a> since it&#x27;s grid is similar but the CSS package is lighter.<p>[0] - <a href="http://neat.bourbon.io/" rel="nofollow">http:&#x2F;&#x2F;neat.bourbon.io&#x2F;</a>

As neat as the Bootstrap grid is, the day that we have broad browser support for the CSS Grid spec cannot come soon enough.

Personally I don&#x27;t like how it works. The padding &#x2F; margin stuff just makes things too difficult to work with.<p>&#x2F;personal opinion

Is the Bootstrap 3 grid better than the one from PureCSS? I&#x27;m building a thing where I use PureCSS only for the grid so I&#x27;m wondering if I should replace it with Bootstrap.

This is a great post. It&#x27;s worth noting though that they added .container-fluid back into Bootstrap 3 after this post was created. Here&#x27;s a quick example of how that works: <a href="http://codepen.io/ncerminara/pen/omChv" rel="nofollow">http:&#x2F;&#x2F;codepen.io&#x2F;ncerminara&#x2F;pen&#x2F;omChv</a>

The biggest problem I&#x27;ve had with bootstrap is that it is so large. There is so much overhead. My company is working on a project and it would have taken a ton of work to port to bootstrap.<p>For lightweight grids that support dynamically sized containers, masonry was great. But there a ton of issues with keeping the content centered when the container changes size.<p>We dealt with this by using inline-blocked elements with tex-align: center, then appending invisible elements to maintain an apparent left-oriented grid: <a href="https://github.com/hangify/Central" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;hangify&#x2F;Central</a>

Excellent tutorial on the fundamentals of bootstrap 3. I wish I had read this earlier. Get bootstrap should also explain the basics in greater details so that new programmers can avoid making mistakes.

What is the preferred method for a row that needs to span the entire width of the container? As in, without the 15px margin on the column? Just set the margins to 0px?

My problem with the Bootstrap grid is the strange choice of breakpoints, especially on the smaller screensize end. It&#x27;s way too complicated to alter the given breakpoints or add custom ones with Bootstrap. I&#x27;d rather use something like Susy for grids. Not so much more effort to set up, but much less limitations. Are you really all ok with Bootstrap&#x27;s breakpoints?

Nice and helpful diagrams, although IMHO explanation would be much clearer if he used the common CSS terminology, like floats instead of things like &quot;positioned left&#x2F;right&quot;. If I haven&#x27;t already know how pull-* classes work internally I&#x27;m not sure if I&#x27;d able to follow through.

I&#x27;ve been developing stuff based on Bootstrap lately, and it amazes me how this article appears on the first page of many of my related searches - something like a third I would say. I don&#x27;t know if this is due to the article&#x27;s excellent content or due to some good referencing.

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 &quot;Columns&quot; screenshot, gutter = 30px, but screen edge padding = 15px. How would I achieve the same value for both? (I&#x27;m not a Bootstrap user.)

Had to stop reading after you literally used the phrase &#x27;this one weird trick&#x27;.

I&#x27;ve always wondered why they did the padding, negative margin, then padding system. Nice simple explanation. This is also a good resource if you want your own simple grid system without using bootstrap.

I&#x27;ve switched to foundation for my last projects. I just like the grid and defaults better. Also, there&#x27;s an option to have collapsed (with no padding) columns which I&#x27;ve find useful.

What to do if you need columns&#x27; sizes to be e.g. 7.5 and 4.5 ?

What did he use to create the wireframe images?

I can&#x27;t help but feel bad for people who worry about this kind of thing.