Bootstrap 3 vs. Foundation 5: Which Front-end Framework Should You Use?

Front-end frameworks make life easier.

They increase productivity and are great for prototyping and building sites rapidly. Moreover, they offer bonuses like cross-browser compatibility and ready-to-go CSS components.

Essentially, using a front-end framework means that you don’t have to start from scratch every time you build a new website and/or web application.

Front-end frameworks, which can also be referred to as CSS frameworks, are usually composed of a set of files: notably HTML, CSS, and JavaScript (JS) documents.

While there are many front-end frameworks, two of the most common are Bootstrap and Foundation. Although they share many similarities, there are some key differences as well.

In this article, I’ll explore which framework is best for you, given your style, preferences, and goals.

From Humble Beginnings: Bootstrap and Foundation

The Bootstrap Origin Story

The Bootstrap framework was first created in mid-2010 at Twitter, built by employees Mark Otto and Jacob Thornton. At first it was an internal style guide, but it was later released to the public on August 19, 2011.

As of today, Bootstrap has had over 20 releases. It also has a ton of stars on Github: at time of writing, it is the most popular project on Github, with 82,263 stars.

The Foundation Origin Story

Foundation also began as an internal style guide, built by the ZURB design agency in 2008. It was released to the public in the fall of 2011.

Over time, Foundation has had more releases than Bootstrap (which could mean they’ve put more time into fine-tuning and getting rid of glitches). However, Foundation is not as widely-used as Bootstrap.

Similarities between Bootstrap and Foundation

1. Open source
Both frameworks operate under the MIT license, meaning they are free to use and adapt upon.

2. Responsive, or “mobile first”
A responsive site essentially means that the given website or web app can work seamlessly across screen sizes—mobile, tablet, and desktop.

Both of these frameworks come out of the box as responsive, so you won’t have to put in the extra work.

3. 12-column grid system
When it comes to frameworks, a grid system is what gives you the power to lay out your website or app.

Both frameworks have:

• Rows and columns
• Ability to nest columns in rows, and vice versa

Bootstrap Grid Example

Foundation Grid Example

4. Stylized CSS components
Bootstrap and Foundation both come with pre-styled, ready-to-go components.

A few of these include:

• Navigation bar
• Buttons
• Pagination
• Labels
• Progress bar
• And more

5. Optional JavaScript extensions
These easy-to-implement JS plugins make it easy to add certain kinds of more advanced front-end features—like affixed sidebars or pop-up modals.

At the time of writing, Bootstrap has 12 JS plugins, whereas Foundation has 15.

Bootstrap vs. Foundation Comparison Table

Here is a quick comparison of the two front-end frameworks.

all info based on time of writing, June 2015

It’s obvious both have similarities, as well as advantages.

But which should you use?

The Advantages of Bootstrap

1. Massive Community Support
Given Bootstrap’s immense popularity, there is a large community using the framework. Again, it has 81,500+ stars on Github, compared to Foundation’s 20,000 stars.

Additionally, the term “twitter-bootstrap” has over 41,000 questions tagged on Stack Overflow versus the 3,300 questions tagged for “zurb-foundation”. So if you have a question about Bootstrap, you’re more likely to find an answer, and quickly.

Plus, there are more tutorials (as well as full-blown courses) on how to use Bootstrap.

2. More themes available
Because of its popularity, there are more Bootstrap-based themes available.

Meaning if you’re using a platform like WordPress and looking for a theme to use, this could be a better option.

3. Greater browser compatibility
The big distinction in compatibility is the support for Internet Explorer 8. Having support for older browsers can make a difference, especially for sites aiming to engage older demographics. (Whom may be less likely to be using the most up-to-date browsers.)

Foundation supports IE9+ (not IE8+). There have reportedly been issues with Foundation on older versions of Opera; however, the only official compatibility difference is in Internet Explorer.

4. Can use Less or Sass
Foundation only works with Sass/Scss—a popular CSS preprocessor.

On the other hand, as of version 3, Bootstrap works with the Less preprocessor (how it was originally built) as well as Sass. So if you’re a person who prefers Less, this might be the tipping point for you.

Of course, both frameworks can also be used with CSS.

5. Sites that Use Bootstrap
Many professional, successful websites have used Bootstrap to create sleek, functional pages. Among them:

• Newsweek
• Vogue
• Lyft
• Spotify

The Advantages of Foundation

1. More of a design-it-yourself approach
Foundation provides a better environment for website customization. Although it’s possible to customize with Bootstrap, it takes a fair amount of effort to get your site to not look like other Bootstrap sites.

With Foundation, the out-of-the-box CSS design is more of a flat design and looks good right away. And you don’t have to customize too heavily.

2. Do not have to add classes to be responsive or achieve certain style
If you don’t add the correct CSS classes with Bootstrap, effects will not appear.

With Foundation, there are base CSS appearances built in. Some may prefer this, especially since there won’t be as much CSS bloat in your HTML.

3. Novelty
Bootstrap’s popularity is like a double-edged sword.

Since many sites use Bootstrap, it can make it easy to tell if a site has been built with Bootstrap. Of course, the last thing you want is a website that looks like everyone else’s.

Because Foundation is less popular, the look is more unique. Bootstrap sites can look cookie-cutter unless extensive customization work is done.

4. More grid system capabilities
Many prefer the Foundation grid, for they find it offers more flexibility. A couple of the extra capabilities:

• Can center columns.
  

• Can add a “collapse” class which allows you to easily collapse columns and remove gutters.

• Can use a block grid which allows you to create equal-sized columns with minimal markup.

5. Additional built-in widgets
When it comes to extra components and JS extensions, Bootstrap and Foundation are basically head-to-head.

But here are a few extras that Foundation has that Bootstrap does not.

1. Form validation, Abide: HTML5 form validation library
2. Off-canvas menus: Easily place your site navigation off to the side of your site
3. Pricing tables: Ready-to-go table, designed to show prices for a subscription based product
4. Responsive media, Interchange: Website loads different media for different devices/screen sizes, so you can customize the user experience
5. Right-to-left support: Modify the text direction; great for sites in other languages where characters move from right to left
6. Tour, aka Joyride: Give users a tour when they come to your site

6. Additional support options
Unlike Bootstrap, the Foundation team offers services and courses as a form of support. For businesses, they offer technical support priced per incident.

Moreover, the Foundation team has put together online training courses for Foundation as well as other web technologies.

7. Sites that Use Foundation
Just like Bootstrap, Foundation is used by big names. See how you like the look and function of these websites that use Foundation:

• PBS
• National Geographic
• The Washington Post
• Mozilla

Conclusion

In the end, using a front-end framework is ideal for people who want to build quickly, or at least not start from scratch. As you can see, many successful sites use Bootstrap and Foundation.

Without a doubt, using a front-end framework makes it easy to get up and running. Bootstrap and Foundation can both get you there—so figure out what’s most important to you in a framework, and the choice is up to you!

About the Author

Laurence Bradford is the creator of learntocodewith.me, a blog for self-taught coders. When she’s not building websites, she’s writing about building websites. You can find Laurence on Twitter, too.