Bootstrap vs Foundation – Top 2 CSS Frameworks

bootstrap vs foundation

When it comes to being a developer and designer you usually always reach a crossroads of which CSS framework should you use? There are many out there to choose from, but two of the most commonly mentioned ones are Bootstrap and Foundation. In this post, we will be comparing the two CSS frameworks, Bootstrap vs Foundation. Read more below about how using a framework can help speed up and streamline your development and design process.

What is a CSS Framework?

Building a website or app from scratch can take a lot of time and development. A CSS framework is commonly used by developers and designers as a tool to speed up the process. A CSS framework, also sometimes referred to as a front-end framework, is essentially a package that is made up of predefined HTML, CSS, and JS which can be used when starting to build out a project. This way you don’t have to code from a blank slate every time you need to create a website or web application. In this post, we are specifically focusing on front-end frameworks which usually have to deal with what the visitor actually sees.

A CSS framework usually consists of the following components:

  • HTML code which help make up the structure of the pages
  • Typography styles
  • CSS to visually change how elements appear (a standard set of easy to use classes)
  • JavaScript to change dynamic elements such as drop-downs, expanding menus, etc.
  • Responsive media queries
  • Cross-browser compatibility fixes

And if we take a look at Google Trends for “Bootstrap 4” (alpha version) and “Foundation 6” (latest version) it appears there is much more activity with Bootstrap. In this post we will be focusing on comparing Bootstrap 4 vs Foundation 6. The first Bootstrap 4 alpha was released over a year ago now and is almost released.

According to BuiltWith, 11.8% of the top 100,000 websites are using Bootstrap to power their websites. And 2.3% of the top 100,000 websites are using Foundation Framework.

Advantages and Disadvantages to Using a Framework

There are many advantages to using a CSS framework. One of the biggest is probably not having to start every project or website completely from scratch. Having a good base or foundation can save you a lot of time.

Here are some other advantages:

  1. Easier to maintain code with snippets and libraries
  2. More organized and easy to setup
  3. Easier decisions that are already made for you
  4. Responsive media queries and browser compatibility fixes already included
  5. Most are free and open source
  6. Stable and well tested code by hundreds of developers
  7. Usually the ability to contribute on Github
  8. Get regular updates, bug fixes, and new feature

Now that all sounds great, but there can also be some possible disadvantages to using a framework:

  1. Sometimes requires lots of tweaking to make it work, could end up costing you more time
  2. Requires documentation for changes when updating
  3. Missing a feature you need, in which you have to introduce another 3rd party asset
  4. Possibly unnecessary code for your unique situation
  5. Might make collaboration harder

Bootstrap

Bootstrap, originally named Twitter Blueprint, was created by Mark Otto and Jacob Thornton and released on August 19, 2011. “A small group of Twitter employees set out to improve our team’s internal analytical and administrative tools. After some early meetings around this one product, we set out with a higher ambition to create a toolkit for anyone to use within Twitter, and beyond. Thus, we set out to build a system that would help folks like us build new projects on top of it, and Bootstrap was conceived.” – Mark Otto

It is an open-source front-end framework consisting of HTML, CSS and JavaScript. It is modular and in version 3 consists of LESS stylesheets. However, with Bootstrap 4 they have switched over to the Sass CSS preprocessor. Check out our post on Sass vs LESS. It is based on a 1,170px grid system which is a responsive layout. Within the Bootstrap download (currently version 4.0.0-alpha.3) you’ll find the following directories and files, grouping JS and CSS together with minified versions.

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
└── js/
    ├── bootstrap.js
    └── bootstrap.min.js

Bootstrap supports the latest, stable releases of all major browsers and platforms. On Windows, they support Internet Explorer 9-11 and Microsoft Edge. Note: Bootstrap doesn’t support IE8. If you need support it is recommend to use Bootstrap 3.

Foundation

Foundation is a responsive front-end framework built by ZURB, a product design company. It is open-source and was released in 2011 under the MIT license. It is modular and consists mainly of Sass stylesheets. It is based on a 940px grid system which is a responsive layout. Foundation also provides users with starter templates allowing them to begin creating their next web project even faster. Some brands using Foundation include Adobe, eBay, EA, Amazon, and Mozilla.

Within the Foundation download (currently Foundation 6) you’ll find the following directories and files, grouping JS and CSS together with minified versions. With version 6 ZURB significantly cut the file size of the outputted CSS by implementing a roughly 40-50% code reduction.

foundation-sites/
├── plugins/
│   ├── foundation.abide.js
│   ├── foundation.accordion.js
│   ├── foundation.accordionMenu.js
│   └── foundation.core.js
│   └── foundation.drilldown.js
│   └── foundation.dropdown.js
│   └── foundation.dropdownMenu.js
│   └── foundation.equalizer.js
│   └── foundation.interchange.js
│   └── foundation.magellan.js
│   └── foundation.offcanvas.js
│   └── foundation.orbit.js
│   └── foundation.responsiveMenu.js
│   └── foundation.responsiveToggle.js
│   └── foundation.reveal.js
│   └── foundation.slider.js
│   └── foundation.sticky.js
│   └── foundation.tabs.js
│   └── foundation.toggler.js
│   └── foundation.tooltip.js
│   └── foundation.util.box.js
│   └── foundation.util.keyboard.js
│   └── foundation.util.mediaQuery.js
│   └── foundation.util.motion.js
│   └── foundation.util.nest.js
│   └── foundation.util.timerAndImageLoader.js
│   └── foundation.util.touch.js
│   └── foundation.util.triggers.js
└── foundation-flex.css
└── foundation-flex.min.css
└── foundation-rtl.css
└── foundation-rtl.min.css
└── foundation.css
└── foundation.js
└── foundation.min.css	
└── foundation.min.js

Foundation supports the latest, stable releases of all major browsers and platforms. Most of them going back two versions. On Windows, they support Internet Explorer 9-11. Note: Foundation doesn’t support IE8 because of some of the grid properties it uses as well as JavaScript.

Bootstrap vs Foundation

  • Both Bootstrap and Foundation (the latest versions) are now using SASS and mixins.
  • Both have a grid system, but Foundation has what they call responsive gutters.
  • For reset Bootstrap uses reboot.css and Foundation uses normalize.css
  • Both support up to 12 columns with fluid widths up to 75em

Below are a couple examples of the differences between some of the syntax.

Single column class syntax

Bootstrap

.col-xs-1 
.col-sm-1 
.col-md-1 
.col-lg-1 
.col-xl-1

Foundation

.small-1.columns
.medium-1.columns
.large-1.columns
.[custom]-1.columns

Containers

Bootstrap

<div class="container">
or
<div class="container-fluid">

Foundation

<div class="row">

Gutters

Bootstrap

Not available.

Foundation (cool feature of Foundation)

<div class="row large-collapse medium-uncollapse [custom]-collapse">

Media Queries

Bootstrap

// Extra small devices (portrait phones, less than ???px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }

// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }

// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }

// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }

// Sass mixins
@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

Foundation

// Small
None

// Medium
@media screen and (min-width: 40em)

// Large
@media screen and (min-width: 64em)

// [Custom]
@media screen and (min-width: [custom]em)

// CUSTOM BREAKPOINTS (Sass)
$breakpoints: (
 //all px values are converted to ems
 small: 0px,
 medium: 640px,
 large: 1024px,
 xlarge: 1200px,
 xxlarge: 1440px,
 [custom]: ...px,
);

Nested Columns

Bootstrap

<div class="row">
 <div class="col-sm-9">
 <div class="row">
 <!-- nested columns add up to 12 -->
 <div class="col-xs-8 col-sm-6">...</div>
 <div class="col-xs-4 col-sm-6">...</div>
 </div>
 </div>
</div>

Foundation

<div class="row">
 <div class="small-6 columns">
 <div class="row">
 <!-- nested columns add up to 12 -->
 <div class="small-6 columns">...</div>
 <div class="small-6 columns">...</div>
 </div>
 </div>
</div>

Offset Columns

Bootstrap

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

Foundation

<div class="row">
 <div class="large-1 columns">1</div>
 <div class="large-8 large-offset-3 columns">8, offset 3</div>
</div>

Active Development

Both frameworks are very active on Github, you can see some of the recent activity below. Bootstrap is the second most-starred project on GitHub, with over 98,000 stars and more than 44,000 forks. Foundation has over 23,000 stars and a little over 5,000 forks.

Github activity Bootstrap Foundation
# of open issues 444 338
# of pending pull requests 185 78
# of commits in the last 30 days 40 9

Summary

As you can see CSS frameworks are very powerful and they can help streamline your development and design process. While it appears that Bootstrap is more widely used, there isn’t really a framework that is better than the other. It usually comes down to the developer and what they are comfortable with using. Both of them have their pros and cons.

Out of the Bootstrap vs Foundation match up, do you think one is better than the other? Let us know below in the comments.

Related Posts

Bootstrap vs Foundation – Top 2 CSS Frameworks was last modified: August 23rd, 2016 by Brian Jackson
  • Jason

    Bootstrap is great if your not tweaking or adding a lot. By default it has a lot of small styles like rounded radius corners etc that to change requires a bit of work and can be error prone for pixel perfection.

    On the other hand foundation is a bit easier to tweak as the defaults are more basic with out the little things like bootstrap.

    Also utilizing both with scss and gulp you can easily remove sub files. Don’t need a modal? Comment it out in the main sass. Just want the grid? Just pull in the grid file.

    Bootstrap gets a bad wrap as it’s usually pretty easy to spot a bootstrap styled site as stated its a pain to tweak the little things.

    • Kevin Roulent

      Let’s say you don’t want rounded edges on your buttons. Just create a new class where you specify the “border-radius:none;” and you apply that class to your button. If you put your own stylesheet after the default bootstrap one, it will overrule Bootstrap. Nothing hard to it. The same is true for Foundation, except Foundation is much simpler, in the sense that all these unnecessary changes aren’t present, so customizing it is less time-consuming, but not easier or harder. At least, that’s how I feel about it. Maybe Foundation’s syntax is slightly easier to understand/remember, but that varies from one person to another, I guess.

      • Jason

        Well your solution works it is not efficient. The purpose to using sass and gulp is to eliminate extra classes and not overriding them. I have seen the approach you outlined with extra CSS adding 40-100 mb of CSS size. With mobile you should be striving for a CSS file that’s -40 mb over the original.

        • Fernando Carrascosa

          Well, not sure about Bootstrap 3, but in Bootstrap 4 (eternal alpha) you can set: $enable-rounded: false; and that would be all to remove these border-radius things…

  • I’ve always had this thought that Bootstrap is for developers (more visually complete, less js) and Foundation is for designers (less visually complete, more js). I find personally as a designer for front-end, I’m always pulling my hair out using Bootstrap. I find Foundation great for creating a unique site without the need to know or write much JavaScript.

  • Both a are great I think..Cause, you can make great site using both…But Bootstrap is more popular than Foundation..

    • Lukas Coffey

      Popularity is rarely the best indicator. I’ve used both Foundation and Bootstrap and can tell you Foundation is much simpler if you’re dev-ing out a custom design. Bootstrap is great for backend devs who need something straight out of the box to get their apps up and running. And in some cases if you’re fine writing code that overwrites the Bootstrap code, it’s all you would need. But for bigger, more complex and highly customized designs Foundation is the way to go.

  • Ahhh yes, Bootstrap vs. Foundation. I’ve used them both! They both have a lot of great features, they both have their idiosyncrasies. I consider myself fluent in both. Foundation has one problem that won’t seem to go away FOUC or Flash of Unloaded Content. This started happening in F 6.0 and was bad in 6.0.5, the boys at Foundation said, “oh we fixed that, upgrade to Foundation 6.2.1” (which didn’t fix it), then they said, “upgrade to Foundation 6.2.3” – that didn’t fix it either. I’m now up to Foundation 6.3.1 and you guessed it – FOUC is still a problem. Yes there are a few (what I consider to be) hacks that can “help minimize it” but to me… come on Foundation – eliminate it already! Granted the issue of FOUC is less apparent in some browsers and more apparent in others (FireFox being the worst offender) but it even shows up in Chrome. Bootstrap… one thing I’ll never understand is why the library decides (as you shrink the browser window) to instill max-width making the content JUMP in a very unappealing manner. Why does Bootstrap do this? It has to be one of the dumbest things I’ve ever seen!

    So there ya have it! Bootstrap vs. Foundation – They both handle “going to a mobile friendly menu” very well (well – they’re both functional anyway). Both could use some improvement and both could use better docs – just my opinion!

  • I stick with Bootstrap.

Shares
Share This

Share This

Share this post with your friends!