Home > bootstrap > Grid System Comparison: Bootstrap 3 vs. Foundation 5

Grid System Comparison: Bootstrap 3 vs. Foundation 5

January 6Hits:2
Advertisement

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:

Screens Viewport Size Container Width Class Prefix
Extra small screens < 768px auto .col-xs-*
Small screens ≥ 768px 750px .col-sm-*
Medium screens ≥ 992px 970px .col-md-*
Large screens ≥ 1200px 1170px .col-lg-*

Foundation includes five em-based media queries. These are shown in the following table:

Screens Viewport Size Class Prefix (Default Grid) Class Prefix (Block Grid)
Small screens ≤ 40em (640px) .small-* .column(s) .small-block-grid-*
Medium screens ≥ 40.063em (641px) .medium-* .column(s) .medium-block-grid-*
Large screens ≥ 64.063em (1025px) .large-* .column(s) .large-block-grid-*
XLarge screens ≥ 90.063em (1441px) Not Activated Not Activated
XXLarge screens ≥ 120.063em (1921px) Not Activated Not Activated

To give you an idea of how these media queries work, I suggest you take a look at a Bootstrap demo and the related Foundation demo. But if you’re still a little confused, the upcoming sections will clarify things.

Note: Foundation’s grids for XLarge and XXLarge screens are by default deactivated. If you want to use them, you have to “uncomment” and set the values of the $include-xl-html-grid-classes and $include-xl-html-block-grid-classes variables to true. You can find those variables in the _settings.scss partial.

Grid Structure

Bootstrap and Foundation each offer a mobile-first 12-column grid consisting of rows and columns. Columns are nested inside a row. They scale up to 12 for each row. Rows can be nested within the columns as well.

Grid System Comparison: Bootstrap 3 vs. Foundation 5

Both frameworks come with many predefined classes you can use to set the size of your columns. As mentioned above, Bootstrap includes four media query breakpoints and Foundation has five. For each grid, there’s a different class prefix that can be used to set the size of the columns (see the two tables).

Bootstrap’s grid also requires a wrapper element for rows. This should have a class of either container or container-fluid. An element with the container class has a fixed width, which varies depending on the viewport (see the first table above), while an element with a class of container-fluid expands to fill the entire width of the browser window.

Columns != 12?

It’s possible the number of columns in a grid is not exactly 12. In such a case, Bootstrap will float the last column to the left, while Foundation will float it to the right. If you want to override Foundation’s default behavior, add the end class to the last column.

To see this difference in action, you can take a look at a Bootstrap example and a Foundation example.

Utility Classes

Both frameworks offer extra classes that give you great flexibility to customize their grids.

Visibility classes let you show or hide content based on specific screen sizes. Offset classes allow you to center incomplete columns or adjust the amount of spacing between them. There are also classes that specify the order of columns across different devices.

Examples of all these different classes can be shown in this Bootstrap demo and this Foundation demo.

Block Grid

Beyond the default grid, Foundation supports another grid feature, called block grid. This allows you to create equal-sized columns with minimal markup. In order to use it, define the row as a ul element and the columns within it as li elements. Then specify the column sizes by applying the related classes (see the 2nd table above) to the ul element.

At this point you might be thinking, what are the differences between the regular grid and the block grid? Let’s briefly look at two of them:

  1. Unlike the default grid, which applies a max-width to each row, the block grid always fills the full window width.
  2. The block grid can be used only for equal-sized items.

To better demonstrate how the grids differentiate, here’s a demo.

Using the Grids

Now that we have a good understanding of the grids of these two frameworks, let’s see how we can use them to build a Bootstrap page and the corresponding Foundation page.

The screenshot below shows the first layout that we’ll build:

Grid System Comparison: Bootstrap 3 vs. Foundation 5

Starting with Bootstrap, we define an element with a class of container. As discussed earlier, this class sets a fixed width to the element with the value depending on the screen size (see the Bootstrap table). Then, we add an element with a class of row to it.

Now, we’re ready to set up our columns. For large screens, we want four equal-sized columns. So we define four div elements each with a class of col-lg-3. However, for small and medium devices we prefer having two columns per row. For this reason, we use the col-sm-6 class. Finally, for extra-small devices we want the columns to be stacked. This is the default behavior of mobile-first frameworks, and thus, there’s no need to define the col-xs-12 class.

Here’s how the HTML looks:

<div class="container">      <div class="row">          <div class="col-sm-6 col-lg-3">              <!-- content -->          </div>          <div class="col-sm-6 col-lg-3">              <!-- content -->          </div>          <div class="col-sm-6 col-lg-3">              <!-- content -->          </div>          <div class="col-sm-6 col-lg-3">              <!-- content -->          </div>      </div>  </div>

Let’s continue with Foundation.

Foundation’s grid is very similar to Bootstrap’s, but it’s a bit simpler. First, we have to define an element with a class of row that will contain our columns. This class sets the element’s max-width to 62.5rems (1000px). Next, we add the columns. To achieve this, we specify div elements each with a class of column or columns, and set their width using the corresponding grid classes (see the Foundation table above). Again, for small devices we don’t have to define the small-12 class.

Here’s the HTML based on Foundation’s grid:

<div class="row">      <div class="medium-6 large-3 columns">          <!-- content -->      </div>      <div class="medium-6 large-3 columns">          <!-- content -->      </div>      <div class="medium-6 large-3 columns">          <!-- content -->      </div>      <div class="medium-6 large-3 columns">          <!-- content -->      </div>  </div>

At this point I hope you’ve started to become more familiar with the grid system of the two frameworks. But maybe another example will help make this clearer.

In this next case, we’ll structure the footer. The following graphical representation shows how we want to style it:

Grid System Comparison: Bootstrap 3 vs. Foundation 5

Here we’ll choose a different layout mode compared to the previous example.

For medium screen sizes and up (or small and up for Bootstrap’s grid), we want to display three columns. Notice, however, that there is a nested row in the last column. This consists of two columns. We’ll set their width to be 50% of a row’s width for all devices. Finally, we’ll adjust the visibility of the icons that are appearing in the nested columns.

Here’s the code for Bootstrap:

<div class="container">    <div class="row">      <div class="col-sm-4">        <!-- content -->      </div>      <div class="col-sm-4">        <!-- content -->      </div>      <div class="col-sm-4">        <div class="row">          <div class="col-xs-6">            <a href="#">              <p>Let's meet and discuss</p>              <i class="fa fa-map-marker fa-2x visible-lg"></i>            </a>          </div><!-- .col-xs-6 -->          <div class="col-xs-6">            <!-- content -->          </div>        </div><!-- .row -->      </div><!-- .col-sm-4 -->    </div><!-- .row -->  </div><!-- .container -->

And with Foundation:

<div class="row">    <div class="medium-4 columns">      <!-- content -->    </div>    <div class="medium-4 columns">      <!-- content -->    </div>    <div class="medium-4 columns">        <ul class="small-block-grid-2">            <li>              <a href="#">                <p>Let's meet and discuss</p>                <i class="fa fa-map-marker fa-2x show-for-large-up"></i>              </a>            </li>            <li>              <!-- content -->            </li>        </ul>    </div><!-- .medium-4 .columns -->  </div><!-- .row -->

Note: Instead of the block grid, we could have used Foundation’s default grid for creating the nested row.

Conclusion

If you want more info on Bootstrap’s grid system, you might want to also read Syed Fazle Rahman’s article Understanding Bootstrap’s Grid System.

To conclude, in this article, I introduced the grid structure of both Bootstrap and Foundation. Then we looked at how to take advantage of their grids in a real project. As you can see, both grids look similar and can be further customized.

I hope you enjoyed reading this article and maybe you can apply what you learned here to your own projects. As always, feel free to share your thoughts about these frameworks in the comments below.

Related Articles

  • Grid System Comparison: Bootstrap 3 vs. Foundation 5

    Grid System Comparison: Bootstrap 3 vs. Foundation 5January 6

    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

  • My Grid system using bootstrap is not working properly

    My Grid system using bootstrap is not working properlyJanuary 25

    I wrote simple grid system using bootstrap and compiled in chrome. but those grid system is not displaying properly. code:- <!doctype html> <html> <head> <title>Gris system</title> <link rel="stylesheet" href=&qu

  • How I can use grid system of bootstrap in views-exposed-form.tpl.php?November 6

    I have a form with filters exposed and I want to apply the bootstrap grid system for each input to adapt to different devices, but in the views-exposed-form.tpl.php I don't know how to access each generated input.

  • Bootstrap's Grid System vs. Susy: A Comparison

    Bootstrap's Grid System vs. Susy: A ComparisonAugust 29

    There are a lot of grid frameworks for us the to choose from while developing websites nowadays. Of the many frameworks, one of most loved and yet most hated framework is definitely Bootstrap. Today, I'll like to introduce you to a slightly lesser kn

  • Is there a comparison of Frameworks, Grid Systems and Boilerplates? September 1

    There are so much of them, how can I know what to use for a project? --------------Solutions------------- Well, there is a comparison of web application frameworks in a Wikipedia page. Also you may find this Stackoverflow post on Grid system comparis

  • Understanding Bootstrap's Grid System

    Understanding Bootstrap's Grid SystemNovember 11

    Bootstrap is undoubtedly one of the most popular front-end frameworks. With more than 73k stars and 27k forks, Bootstrap is also one of the most popular GitHub repositories. In my last article, Responsive Web Design Tips from Bootstrap's CSS, I expla

  • Grid layout - why should I use it, and should I use a framework like Bootstrap or Foundation?

    Grid layout - why should I use it, and should I use a framework like Bootstrap or Foundation?September 6

    I had experience with Twitter Bootstrap and Foundation, and I personally think the only thing I want to use is their grid system. Other features are just bloated. So I read about the prospect of a grid layout. All of the articles I found are oriented

  • Border each item without padding in Bootstrap Grid System while keeping distance between themJanuary 14

    I want to border each item in Bootstrap Grid System while keeping distance between them but struggle to achieve so. Here is a simple Codepen to illustrate what I'm trying to achieve: http://codepen.io/anon/pen/xZLNqY .card-box .image img { width: 100

  • Bootstrap cards/thumbnails not lining up side by side correctly in the grid system & card deckFebruary 6

    I'm having a problem with getting Boostrap's thumbnails & cards to line up side by side in their grid system. Basically, this is an assignment & I have to follow certain parameters: -must use Bootstrap grid system sm-size columns -these squares of

  • Custom bootstrap like grid system with HTML and CSS February 7

    How to implement Custom bootstrap like grid system with HTML and CSS? Or how does bootstrap internally implement grid system ? --------------Solutions------------- As Won Jun Bae suggested, the best way to learn it to check out Bootstrap CSS files. H

  • Bootstrap Grid System on mobiles?February 11

    See the following JSFIDDLE <div class="row"> <div class="col-md-3 col-xs-6"> <div style="background: blue;"> test & test & </div> </div> <div class="col-md-3 col-xs-6"> &l

  • Creating a Responsive Grid System with Susy and BreakpointDecember 9

    The big appeal behind CSS frameworks (like Bootstrap and Foundation) is that they come with a responsive grid system all set and ready to go. The downside is that you have to be content with their column count, the width of their gutters, and all the

  • Introducing sGrid: A Stylus-based Flexbox Grid SystemDecember 2

    After reading the title of this post, you might ask: Why another grid system? This is a good question. Basically there are plenty of grids out there and many of them are flexbox grids too. So why have I built another tool that's similar? The short an

  • most efficient way to create a grid system in unityMay 19

    I'm creating a little tower defence game to get myself acquainted with unity. At first I was going to emulate a grid system by capturing touches / mouse clicks and rounding the coordinates to the nearest whole numbers. This is very low cost and works

  • Getting: org.opengis.referencing.NoSuchIdentifierException: No transform for classification "Transverse Mercator Zoned Grid System" with geotoolsApril 22

    Using geotools I've been trying to create a referenced envelope after converting/reprojecting from WGS 84 to UTM with specific zones and it seems that either I need to do something with authority factories or figure out some kind of a workaround for

  • Recommended grid systems or layouts for large display and responsive designs

    Recommended grid systems or layouts for large display and responsive designsJune 16

    I've been working with 960 layout for years – but was wondering if there are other grid systems that are strongly supported by the design and development community and also have blank or starter pages to work with. --------------Solutions------------

  • Blocks and CSS Grid Systems

    Blocks and CSS Grid SystemsSeptember 12

    How do I achieve the following in Drupal: <div class="row"> <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div> <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div> <div class="col-xs-4

  • SASS grid system improvementsJune 3

    I've got this own made grid system made in SASS: @import "../mixins/cross-browser-elements/box"; $columns: 12 !default; $gutter-width-px: 20px !default; @function calculate-column-width($index) { @return percentage($index / $columns); } .row { o

  • Grid system building methodology for webSeptember 18

    For a long time now, I have been using premade grid systems, like foundation grid for instance, which consists a grid of 12 70px columns, and 30 px gutters. But as my design passion seeks the best possible harmony and proportions, I'd like to build m

  • Should I use a CSS grid system for this template?

    Should I use a CSS grid system for this template? February 13

    This might be the wrong place to ask but... I want to convert the following template to HTML and CSS. Should I use a grid system such as bootstrap or skeleton? Seeing as it's already a grid it seems to make sense. I get the feeling that bootstrap wou

Copyright (C) 2017 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 0.667 s.