Bootstrap 3 vs. Foundation 4 feature lineup

Tags: , , , , , &

bootstrap-3-vs-foundation-4

We wrote an article a while back comparing Bootstrap 2 and Foundation 4, the two most popular frameworks for front-end development. Foundation 4 came out on top in the last round, with some forward-thinking features like the fluid grid, interactive website tours and its native support of Sass.

With the recent stable release of Bootstrap 3, usage of Twitter’s latest version of the framework has grown with the same explosive popularity as the previous version. Bootstrap 3 has taken on board many of the popular features seen in Foundation, as well as introducing some cool new stuff.

Here’s a new feature line-up comparing the two frameworks, the new handy features in Bootstrap and the features which set the two apart.

Bootstrap 3.0 Foundation 4.3
New Bootstrap 3 features
Built-in icon fonts ‚úî ‚úñ
Built-in testing server ‚úî ‚úñ
Fluid grid ‚úî ‚úî
Grunt support ‚úî ‚úñ
Horizontal lists ‚úî ‚úî
IE 8 support ‚úî ‚úñ
Media object ‚úî ‚úñ
Mobile grid ‚úî ‚úî
Panels ‚úî ‚úî
Foundation 4 only
Centered columns ‚úñ ‚úî
Block grid ‚úñ ‚úî
Form validation ‚úñ ‚úî
Gutter-free rows ‚úñ ‚úî
Native Sass support ‚úñ ‚úî
Pricing tables ‚úñ ‚úî
Right-to-left support ‚úñ ‚úî
Video scaling ‚úñ ‚úî
Website tour ‚úñ ‚úî
Ditched
IE 7 support ‚úñ ‚úñ
Typeahead ‚úñ ‚úñ

Despite Foundation being able to boast more features, I would say the two frameworks are now pretty much on par. Bootstrap 3 is moving more towards an all-in-one development environment. Whereas Foundation offers more in the way of interactive components for rapidly building feature-rich apps and websites. They both look really clean, they’re easy to customise and they’ll speed up the development process enormously. So it really comes down to what suits you!

There are a few other key differences to consider when choosing a framework, which we touched on briefly in the previous feature comparison:

The developer community

Bootstrap has been around for longer, hence a much larger user-base, which is supported and maintained by Twitter. I’ve noticed there are less support resources for Foundation and troubleshooting generally takes quite a lot longer. Zurb provide training for Foundation 4, which may be the direction they want their users to go.

Documentation

I’ve been impressed with the documentation for both frameworks. The Bootstrap 3 docs are well structured and communicate how to quickly implement their features. Foundation’s docs are a little less in-depth, but a fair bit more developer-oriented, with mix-ins provided for just about every component.

Setting up your development environment

Developing in Bootstrap 2 was all a bit mysterious, so I reckon they’ve have made huge improvements in Bootstrap 3. It requires setting up Node, Bower, Grunt and Jekyll, which take about 10 minutes to get running on Mac, and roughly an hour on Windows (Jekyll doesn’t really work on Windows, and takes some extra time to get working). I was so impressed with the workflow they’d created, I wrote this article all about it.

The Ruby-based development environment for Foundation is a piece of cake to set up on Mac (with Ruby being pre-installed on nearly all of their machines). Unfortunately, in my experience it is far less trivial setting up Ruby/Rails on Windows and it can take hours.

People who have viewed this post also viewed

Comments

  1. Tom Tuddenham

    There is a good system for using Bootstrap in Rails / Ruby without resorting to Less. Thomas MacDonald’s port of Bootstrap to Sass is actively maintained and up to date:

    https://github.com/twbs/bootstrap-sass

    Having said that, I do have a preference for Foundation. Its support for Ruby is pretty good, though it does tend to sprinkle your app with the odd text file and such that you have to remove after the event.

    Excellent article by the way.

    Reply
  2. Julius

    I am new to developing websites, and started reading about Foundation. Actually built one site using Foundation. I am not familiar with SASS and COMPASS, is Bootstrap that difficult.

    Reply
    1. Sam Post author

      Bootstrap is extremely easy to use. All you’ll need to know is basic HTML and CSS. Neither Foundation or Bootstrap require any familiarity with Sass, Compass or any other tool. CSS pre-processors are a matter of preference. Foundation is built with Sass, Bootstrap is built with Less. It’s easier to develop with the presentation language the tool was natively written in. You can of course write Sass in Bootstrap and Less in Foundation, it just requires a little more work…

      Reply
  3. Lynnais

    @Thomas
    exactly bootstrap 3 is hard and heavy to implement for WordPress themes development unlike foundation, where you import only what you need through sass/compass its super easy flexible. i have tried both and definitely will stick with foundation.

    Reply
  4. Gavin

    Bootstrap all the way – although it’s a bit unfair as I have only used Foundation once. If you are developing WordPress themes I strongly recommend http://roots.io/ it’s got all the Bootstrap goodness built in a a ton of its own features. Its structure is a lot cleaner than most WP Themes. My 2 cents

    Reply
  5. Jeremy Stover

    I have been using Bootstrap 3 since it came out. It is very easy to use, and all you really need to get started using the basic features, is the CDN version of the css file, or a quick download.
    As far as implementing Bootstrap into a WordPress template as the last commenter said, the framework you use has nill importance, it is just those darn hooks you need to worry about. As long as you are starting from scratch with the template, the technology you use is neither here nor there.
    All the same, amazing blog post, lots of info covered, keep it up!

    Reply
  6. Thomas

    I tried for the longest time to incorporate Bootstrap into a WordPress theme and found it very difficult to do. Then I discovered Foundation. The documentation Foundation provides as well as the examples you can download proved far superior and easier to understand.

    Not only that, but Foundation is soon to release F5 which should totally knock Bootstrap out of the ring.

    Reply

Leave a comment

* Required fields

captcha

Please enter the CAPTCHA text