Grid System Comparison: Bootstrap 3 vs. Foundation 5

Originally published at: http://www.sitepoint.com/grid-system-comparison-bootstrap-vs-foundation/

Bootstrap and Foundation are two of my favorite front-end frameworks, especially for rapid website prototyping. Both come with ready-to-use components that speed up my workflow. Beyond their small differences, most of their fundamental features look similar to me.

In this article, I’ll cover the basics of their grids. First, I’ll show you how they’re structured, describing their key components, and how they differentiate depending on the screen size. Then, I’ll go over a real example that will help you put the knowledge gained into practice.

Let’s get started!

Comparing Media Queries

Before analyzing Bootstrap’s and Foundation’s grid structure, let’s first look at the breakpoints that both offer for responsive layouts. These are used to set the number of the available grids that each framework offers.

Bootstrap specifies four pixel-based media query breakpoints. The table below shows them:

Continue reading this article on SitePoint

I think there’s a mistake… the Bootstrap fluid container class is container-fluid instead of fluid_container

Of course, you’re right! We’ll fix it. Thanks!

Your first section on media queries is the reason I continue to use Foundation over Bootstrap. Bootstrap is still stuck in Pixel-Land and that is becoming more and more cumbersome in multi-device layouts, mainly for typographical reasons. Once you switch your media queries from pixel to em based, you have a world of difference of end-user experience, across any screen size.

We did not learn this on our own, but through the wonderful article by Lyza Gardner, here: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

We’re waiting for the day that Bootstrap finally gets rid of all their pixel measurements, because until then, whenever we have to deal with it, we’re continuing to edit/override in order to truly fluid. Note: percentages do not render as well as ems/rems.

Finally, with 504 Compliance hitting my team’s radar more and more, again, we have to go strongly in the direction of proportion, as opposed to the more rigid measurement of pixels.

2 Likes

Good catch, fixed. Thanks.

Nice comparison.

The first HTML example has four columns for Bootstrap but only three for Foundation. I know Bootstrap has an extra container DIV that adds a couple of lines, but at a glance, it makes the difference look more drastic than it actually is.

@djc503 The markup for Foundation should also contain 4 columns (as you can see in the screenshot). I have omitted in the markup the last column, yet we’ll add it in order to make things more clear. If you open the demo page in editor (Codepen) and see this section how is structured, you’ll notice that it contains 4 columns.

I think in general, the less makup the better. Having the extra container div makes the markup a bit more tedious to write and confusing to read. Thoughts?

@georgemarts Great post! I think this really gives people an understanding of how similar Foundation and Bootstrap are, but still highlighting the differences that matter.

@rafibomb Thanks for finding this article useful! Regarding the markup, it depends…In my opinion, less markup is fine assuming there’s a demo as a guide. Otherwise, omitting markup in an article can make things less clear.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.