Bootstrap 4 vs Foundation 6 Grid System

A grid is simply a collection of horizontal and vertical lines creating a pattern against which we can line up our design elements. They help us to create designs where elements don’t jump around or change width as we move from page to page, providing greater consistency on our websites.

Example Web Grid system Based on Bootstrap

 

A grid will typically have columns, rows, and the gaps between each row and column — commonly referred to as gutters. (Source: Mozilla Developer Network).

Both Bootstrap and Foundation have support for responsive grids and flexible breakpoints. However, Foundation has support for responsive gutters, which are so easy to setup that seems like magic.

When it comes to cleanliness Foundation may have a better grid system because Foundation has no containers and relies heavily on rows is a plus, as you end up with a cleaner DOM.

Some important Grid System Features — Bootstrap vs Foundation

 

Bootstrap 4 Grid System

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and aligns content. It’s built with flexbox and is fully responsive.

Columns are centered on the page with the parent .container

.container — for fixed with

.container-fluid — for full width

.row — to ensure all your content is aligned properly down the left side.

Bootstrap grid system work across multiple devices.

 

Extra small— <576px (col-)
Small — ≥576px (col-sm-)
Medium — ≥768px (col-md-)
Large — ≥992px (col-lg-)
Extra Large — ≥1200px (col-xl-)

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

.col-md-4 + .col-md-4 + .col-md-4 = 12

.col-md-3 + .col-md-3 + .col-md-3 + .col-md-3 = 12

.col-md-6 + .col-md-6 = 12

Combining Responsive Classes

<div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12"></div>

This will maintain 3 columns in Large Devices + Extra Large Devices & 2 columns in Medium Screen Devices & 1 Column in Small Screen Devices

Offsetting columns

You can offset grid columns in two ways: Using responsive .offset- grid classes and margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.

Offset classes

Move columns to the right using classes.offset-md-*. These classes increase the left margin of a column by columns*. For example, .offset-md-4moves .col-md-4over four columns.

 

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>      

Bootstrap Grid System Demo – Here is a Demo Link

 

 

Bootstrap 4 Different Grid Layouts Demo – Checkout this Demo Link

 

Foundation 6 Grid System

With foundation, you can create powerful multi-device layouts quickly and easily with the default 12-column, nestable grid.

In foundation, you can see three different classification

  1. XY Grid — Recently introduced in v6.4
  2. Float Grid — Usual Grid System — 12 Column nestable grid
  3. Flex Grid — Powered by Flexbox

Let us start with a regular 12-column nestable grid.

  • Foundation never uses the container as you see in Bootstrap.
  • Foundation is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.
  • Start by adding an element with a class of .row This will create a horizontal block to contain vertical columns.
  • Then add elements with a .column class within that row.
  • Specify the widths of each column with the,.small-#.medium-#, and classes.large-#.
By default has.column an alias .columns (see the $grid-column-aliasoption) —the only difference is grammar.

<div class="row">
  <div class="small-2 large-4 columns"><!-- ... --></div>
  <div class="small-4 large-4 columns"><!-- ... --></div>
  <div class="small-6 large-4 columns"><!-- ... --></div>
</div>
<div class="row">
  <div class="large-3 columns"><!-- ... --></div>
  <div class="large-6 columns"><!-- ... --></div>
  <div class="large-3 columns"><!-- ... --></div>
</div>
<div class="row">
  <div class="small-6 large-2 columns"><!-- ... --></div>
  <div class="small-6 large-8 columns"><!-- ... --></div>
  <div class="small-12 large-2 columns"><!-- ... --></div>
</div>
<div class="row">
  <div class="small-3 columns"><!-- ... --></div>
  <div class="small-9 columns"><!-- ... --></div>
</div>
<div class="row">
  <div class="large-4 columns"><!-- ... --></div>
  <div class="large-8 columns"><!-- ... --></div>
</div>
<div class="row">
  <div class="small-6 large-5 columns"><!-- ... --></div>
  <div class="small-6 large-7 columns"><!-- ... --></div>
</div>
<div class="row">
  <div class="large-6 columns"><!-- ... --></div>
  <div class="large-6 columns"><!-- ... --></div>
</div>

.large-4 + .large-4 + .large-4 columns = 12

.large-3 + .large-3 + .large-3 + .large-3 = 12

.large-6 + .large-6 = 12

Combining Responsive Classes

<div class="large-4 medium-4 small-6 columns"></div>

Foundation offers a few more grid features than Bootstrap, including centered columns, incomplete rows, responsive gutters, semantic grid options and fluid rows.

Centered Columns

You can center your columns by adding a class of .small-centered to your column. Large will inherit small centering by default, but you can also center solely on large by applying a .large-centered class. To uncenter on large screens, use .large-uncentered.

<div class="row">
  <div class="small-3 small-centered columns">3 centered</div>
</div>
<div class="row">
  <div class="small-6 large-centered columns">6 centered</div>
</div>
<div class="row">
  <div class="small-9 small-centered large-uncentered columns">9 centered</div>
</div>
<div class="row">
  <div class="small-11 small-centered columns">11 centered</div>
</div>

Here is the Demo link using Centered Columns

<div class="row login-form-outer">
      <div class="small-12 large-6 medium-6  small-centered columns login-skin">
        <form class="log-in-form">
          <h4 class="text-center">Log in using your credentials
          </h4>
          <label>Email
            <input type="email" placeholder="somebody@example.com">
          </label>
          <label>Password
            <input type="password" placeholder="Password">
          </label>
          <input id="show-password" type="checkbox">
          <label for="show-password">Show password</label>
          <p>
            <input type="submit" class="button success expanded" value="Log in">
          </p>
          <p class="text-center">
            <a href="#">Forgot your password?</a>
          </p>
        </form>
    </div>
 </div>

CSS:

.login-form-outer{
  margin-top:5rem;
}
.login-skin{
  padding:1rem;
  background:#555;
  color:#fff;
}
.login-skin a{
  color:#f9f9f9;
}
.login-skin label{
  color:#fff;
}

Source Ordering is yet another interesting feature using which you can shift columns around between our breakpoints.

With source ordering you can place sub-navigation below main content on small displays, you have the option to position the sub-navigation on either the left or right of the page for large displays. Prefix push/pull with the size of the device you want to apply the styles to. .medium-push-#.large-push-# is the syntax you’ll use. Use the number 0 instead to reset a push/pull, such as .medium-push-0 or .large-pull-0.

<div class="row">
  <div class="small-10 small-push-2 columns">10</div>
  <div class="small-2 small-pull-10 columns">2, last</div>
</div>
<div class="row">
  <div class="large-9 large-push-3 columns">9</div>
  <div class="large-3 large-pull-9 columns">3, last</div>
</div>
<div class="row">
  <div class="large-8 large-push-4 columns">8</div>
  <div class="large-4 large-pull-8 columns">4, last</div>
</div>
<div class="row">
  <div class="small-5 small-push-7 medium-7 medium-push-5 columns">7</div>
  <div class="small-7 small-pull-5 medium-5 medium-pull-7 columns">5, last</div>
</div>
<div class="row">
  <div class="medium-6 medium-push-6 columns">6</div>
  <div class="medium-6 medium-pull-6 columns">6, last</div>
</div>

Block Grids

Block grids are a shorthand way to create equally-sized columns. Add a class of the format .[size]-up-[n] to change the number of columns within the row. By default, the max number of columns you can use with block grid are 8. Adding the .column-block class to columns will apply a bottom margin equal to the width of gutters.

<div class="row small-up-2 medium-up-3 large-up-4">
  <div class="column column-block">
    <img src="https://placehold.it/600x600" class="thumbnail" alt="">
  </div>
  <div class="column column-block">
    <img src="https://placehold.it/600x600" class="thumbnail" alt="">
  </div>
  <div class="column column-block">
    <img src="https://placehold.it/600x600" class="thumbnail" alt="">
  </div>
  <div class="column column-block">
    <img src="https://placehold.it/600x600" class="thumbnail" alt="">
  </div>
  <div class="column column-block">
    <img src="https://placehold.it/600x600" class="thumbnail" alt="">
  </div>
  <div class="column column-block">
    <img src="https://placehold.it/600x600" class="thumbnail" alt="">
  </div>
</div>

Here is the Demo Link for Foundation Block Grids

<div class="row columns">
      <div class="medium-12 large-12 columns">
        <h1>Foundation Block Grids Demo</h1>
        <p class="subheader">There is beauty in space, and it is orderly. There is no weather, and there is regularity. It is predictable. Everything in space obeys the laws of physics. If you know these laws, and obey them, space will treat you kindly.
        </p>
        <button class="button">Take a Tour</button>
        <button class="button alert">Start a free trial</button>
      </div>
    </div>
    <div class="row small-up-2 medium-up-3 large-up-4">
      <div class="column column-block">
        <img src="https://placehold.it/600x600" class="thumbnail" alt="">
      </div>
      <div class="column column-block">
        <img src="https://placehold.it/600x600" class="thumbnail" alt="">
      </div>
      <div class="column column-block">
        <img src="https://placehold.it/600x600" class="thumbnail" alt="">
      </div>
      <div class="column column-block">
        <img src="https://placehold.it/600x600" class="thumbnail" alt="">
      </div>
      <div class="column column-block">
        <img src="https://placehold.it/600x600" class="thumbnail" alt="">
      </div>
      <div class="column column-block">
        <img src="https://placehold.it/600x600" class="thumbnail" alt="">
      </div>
</div>

Useful Links:

  1. Grid system
    Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system…getbootstrap.com
  2. XY Grid | Foundation for Sites 6 Docs
    A fully reworked new grid system in v6.4 which has all the variety inbuilt in the form of multiple grid types which…foundation.zurb.com
  3. The Grid | Foundation for Sites 6 Docs
    Create powerful multi-device layouts quickly and easily with the default 12-column, nestable Foundation grid. If you’re…foundation.zurb.com
  4. Foundation 6 – 10 Amazing New Features
    Developers of the Foundation front-end framework haven’t just sat on their laurels while the Bootstrap team have been…www.hongkiat.com
  5. What’s New in the Bootstrap 4 Grid
    Bootstrap 4 brings many changes and new features to the grid system we are all so familiar with from version 3. The new…tutorialzine.com