State of affairs: Bootstrap 4 vs Foundation 6.2

Posted by Danny Herran on Mar 28, 2016 in Frontend | 49 comments

foundation-vs-bootstrap

Bootstrap 4 and Foundation 6 are the latest versions of the most widely used CSS frameworks out there. Foundation 6 is stable whereas Bootstrap 4 hasn’t been released yet. However, before you wonder why I am comparing a stable framework version vs an alpha one, let me set the record straight by saying that Foundation even though has already been released as stable, it isn’t by any means. Let us explore the current status of both frameworks, their features, flaws and decide which one is better suited to your needs.

Current status

Bootstrap 4: alpha 2
Zurb Foundation 6: stable v6.2

CSS Preprocessor

Both Foundation 6 and Bootstrap 4 are based on SASS. They both have a nice set of mixins, a separate settings sheet, reusable components, etc. Not much to say in this regard besides they are pretty top notch when it comes to SASS.

Winner: tie

JavaScript

Both Bootstrap 4 and Foundation 6 JavaScript libraries are written on ES6, which means, you do need Babel (or any other transpiler) if you want to individually include each of their JS tools into your development pipeline. However, they both have ES5 transpiled versions of each component which should make it easy enough for your to use them without much hassle.

I would like to highlight though that Bootstrap is a little bit ahead when it comes to JS for the fact that their components are simpler, less bloated, well tested and they provide a compiled version of each component separately. Foundation, on the other hand, provides a single JS file with every single compiled component in it, which can be a pain if you are only planning to use a couple of them.

Foundation also went ES6 just a few weeks ago which might render some components unstable at this point.

Winner: Bootstrap 4

Stability

Even though Bootstrap 4 hasn’t been publicly released yet, its team takes stability and backwards compatibility seriously. They use Saucelabs’ automated testing tools to make sure everything passes a test before committing into their main branch. This results in a very stable set of tools that even though are in alpha can pretty much be used in production.

Foundation, on the other hand, was released as “stable” a few months ago. On first launch some components were unfinished such as Abide (their form validation library) which was completely broken, so their colour palette settings. From 6 to 6.2 the team has changed quite a few things making some settings obsolete and introducing stuff like ES6 abruptly on 6.2. This has broken the development pipeline for some people as seen in the issue log.

Testing on Foundation isn’t as neat as I would like. There is currently no testing procedure in place but the team has already outlined that moving forward testing will be a number one priority.

Winner: Bootstrap 4

Grid

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

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 seem like magic.

Collapsed gutters are also a thing in Foundation. You can either have or remove gutters in specific cases that don’t require them by simply adding a class. Other stuff like centered columns and block grids make Foundation the winner when it comes to grids.

In regards to backwards compatibility, both Foundation and Bootstrap use the same class convention as their previous versions. This makes migration as painless as possible.

Flexbox grids are also available on both Foundation and Bootstrap as a separate setting that you can enable/disable depending on your target browser support.

Winner: Foundation 6

Forms

Bootstrap 4 has one of the prettiest forms you will find out there. There are special classes for radios and checkboxes that will make them look much better than the browser default ones. Inline forms, validation icons and icon labels are also very powerful on Bootstrap.

Foundation 6 has a simpler form layout that relies heavily on the grid. Inline forms don’t exist in Foundation which is almost missed. Also, prettified fields are a no-go on Foundation so you must rely on external CSS to prettify your select boxes, radio buttons and checkboxes.

Winner: Bootstrap 4

Menus

While Bootstrap 4 has the same old dropdowns, tabs and basic navigation menus we have come to know from version 3, Foundation has dramatically improved their dropdowns by including other variants that might come in handy in some cases.

Foundation includes stuff like off-canvas navigation, drilldown menus, vertical dropdowns and responsive menus, which changes their behaviour depending on the resolution (this is pretty cool). This makes Foundation leaps and bounds ahead of Bootstrap when it comes to components designed to navigate across multiple sections.

Winner: Foundation 6

Candy

Bootstrap 4 has kept its codebase small and neat for the sake of providing a rock solid foundation to developers. You can trust it and start building things straight ahead. Foundation 6 has gone ahead and included some nice little plugins such as Interchange for responsive content, Equalizer which makes elements the same height, or Abide, a drop in form validation that simply works.

Foundation also equips Panini, a file compiler similar to Assemble.io to put pages together by having partials and templates that you can reuse. They also give you Motion UI, a basic but powerful JS animation library that follows the steps of Velocity JS.

The candy, while sometimes unnecessary and bloated might be useful for prototyping or for developers that simply need to get things done, quickly. You can always remove these features from your pipeline as they are bundled as individual modules in Foundation.

Bootstrap 4, however, has a new component called Cards that will definitely come in handy for people aiming for Material Design.

Winner: tie (opinionated)

Design

Have a look at both their websites and you will immediately realise that Bootstrap is ahead when it comes to design, at least out of the box. Their team has really taken their time to polish each component into something that’s simple but looks beautifully neighbouring other components.

Even though Foundation also looks right, is a different kind of styling that may not be appealing to everyone.

Be that as it may, both frameworks are highly customisable. Although Bootstrap may look prettier on first sight, remember that using the right palette and settings you can make Foundation look even better.

Take the below winner with a grain of salt if the design is important to you. I have chosen Bootstrap as the winner in this case for the design that they provide out of the box, not for what you can do with it.

Winner: Bootstrap 4

Community

I won’t go deep into this because we already know that Bootstrap is way ahead of Foundation when it comes to community contributed plugins and support. Bootstrap is used almost everywhere and there are plugins for everything. It has become the default CSS framework for the web.

Winner: Bootstrap 4

Conclusion

If you are looking for a stable framework that you can trust and forget about it, then Bootstrap is the way to go. Even though it has been sitting in alpha for quite some time, it should be stable enough for any project, as long as you stick to their components and keep the framework up to date.

Foundation, on the other hand, is feature rich but their release process is not thoroughly tested and might break your setup from one version to the other. However, their developers are quite active on Github and are constantly fixing bugs.

At the end of the day, it all comes down to the project and the tool that better fits into it. I hope this post helps to give you a better insight into both frameworks to make an informed decision before you dive into any of them.

  • Sam

    I’d actually comment that Bootstrap 4 is not stable at all yet and you should avoid using it in production until its out of alpha, unless you have the resources to keep pace with it and want the new features badly.

    We’ve done that and found quite a few things changing during the course of the alpha, and these can be hard to track since there are a lot of contributions.

    The changes between stable releases are well documented, but during alpha, experiements and new features are added/removed, with no handy place to track that. You have to comb through the changes via PRs/Issues to find where your component has changed.

    None of this should be surprising though – it’s alpha software! Best to be careful recommending use of alpha stuff in production 🙂

    • I’ve also built a project off Bootstrap 4 alpha and it was fine if all you care about is grids, but the JS libraries, among other things, were gutted.

  • Yves Amsellem

    You should definitely take a look at semantic.ui — and maybe include it here as a third part 😉 — http://semantic-ui.com

    • João Machado

      thank you captain! 🙂

    • Alex Maracineanu

      It’s just superb! 🙂

    • Humbert

      This looks nice, it is a bootstrap complement/addon ?

    • No, it’s a standalone library like bootstrap and foundation.

    • redrage97

      very nice thanks for the link!

    • Semantic UI 2.1 has a very rich set of pretty built-in components and looks promising, but when things break on your phone (e.g., menus), it doesn’t evoke confidence.

    • r4ymonf

      Does your phone’s browser support flexbox?

    • I’m using Chome.

    • r4ymonf

      Really? Works fine here.

    • You don’t see this? http://i.imgur.com/cOy1Ja3.png

      In any case, even if it looks all right for you, it just tells me that the framework isn’t rendering consistently across all modern browsers (I’m using the latest version of Chrome).

    • r4ymonf

      Nope. Rotation?

    • If you have to rotate it to look right, then it ain’t responsive.

    • r4ymonf

      I meant I was rotated while checking it. I should work on my wording.

    • That’s Cool, Thanks!

    • ckissi

      Semantic UI is ok if you don’t want to support mobile devices, on mobiles I always got broken menus 🙁

    • SUDOisEvil

      We had high hopes for Semantic.UI, but it’s no longer a viable competitor after Foundation 5 and Bootstrap 3. I don’t expect it to be around much longer without a major overhaul and a change of philosophy.

    • Yves Amsellem

      Bootstrap 3.x and Foundation 5.x were there since mid 2013, Foundation latest 6.x comes at the end of 2015 while Bootstrap latest 3.3.x was made at the end of 2014 (and not changed much since, while the 4.x is on its way since mid 2016).

      Semantic major development starts in 2015.

      Your words implies Bootstrap 3 and Foundation 5 comes after Semantic and made it deprecated. The dates clearly states it the other way around ;-).

  • I would love to see a comparison of build sizes (gzipped) with various sets of UI components…

  • Ryan Foote

    Some of these line items are comparing apples and oranges — for instance Forms & Design. Bootstrap is used to build Twitter so the forms are heavily styled, whereas Foundation is just that, a foundation to build upon so there is very minimal styling and it’s easy to customize and make it your own.

  • Joe L. Wroten

    Nice comparison that’ll be very helpful for people, I remember trying to compare these side by side for a while without any experience with either of them.

    A minor note though is that with Foundation you can in fact pick and choose which javascript components you wish to use. They just also ship a precompiled version as well that has everything in one file.

  • emrah

    The OP have no taste of design.

  • The comparison will be helpful to many, but I wouldn’t advise people to start using BS4 in production for large projects at the moment. There’s a good reason the developers have tagged it with an alpha label, and not even beta yet, so save yourself potential headaches down the road by sticking with BS3 until you can download BS4 from http://getbootstrap.com/.

    • If you want to use any of the 2 in production, go with Bootstrap. Foundation is way more unstable than Bootstrap in this moment. If you need absolute stability, go with Bootstrap 3 or Foundation 5, both are solid enough.

  • Giorgio Riccardi

    Now would be interesting to see a comparison between Semantic.ui http://semantic-ui.com/ vs. Avalanche Grid System http://colourgarden.net/avalanche/

  • Pingback: Foundation 6.2 vs Bootstrap 4 (A Framework Comparison)()

  • Pingback: Danny Herran » State of affairs: Bootstrap 4 vs Foundation 6.2 - Freakinthecage Webdesign Stuttgart - Der Blog()

  • Daniele Baelde

    I’m ok with what I’ve seen Bootstrap doing for me for the past few years, but I’m looking forward to a Stable Release of Materialize [ http://materializecss.com/ ]. Seems promising and uses Material Design.
    Has anyone had a go at it?

  • Recommending Bootstrap in alpha format is pretty sketchy. One is production ready, the other isn’t.

  • Will

    In addition to Semantic UI, http://getuikit.com is definitely growing as a worthy competitor to BS and ZF. Has a few really brilliant features. One of my favorites is that grid classes (or @extends) can be used on parent containers instead of needing to attach a bunch of noise on each inner element. Particularly for so-called responsive grids where you want 6 columns on desktop, 3 on a tablet and 1 phones, it means two class names on the parent vs 12 across the inner elements.

    There are a lot of other deltas upon which to compare these big libraries. For those doing a redesign of a large existing site (or those who want to use a particular library’s non-semantic class names), one of the most critical deltas is how easy it to use extends or mixins to repurpose existing HTML.

    Another thing I’m (happily) starting to see in these libraries is the idea of a separate theming layer. Say you want all of the functionality of the `navbar` components but none of the style… that should be easy and theming is the way. Default to flat and include the library’s base theme if you want the ‘default’. SemanticUI crushes this one.

    • Can’t agree more. UIkit semnatics and js components, much better then bs and zf, plus its “lighter” then bouth,

    • I really like UIKit, until I have to delve into the JS to try to do anything slightly unusual. Then, there is generally much swearing around the office.

      (Indeed, I’m not the only one in my office who regularly swears at UIkit)

    • Only problems i had with uikit js is when i was dealing with dinamicly loaded elements, then i found about uk-observe… but i dont do much unusual stuff.

  • Peshmerge

    Thanks, awesome article!
    I prefer Bootstrap, but I have also used another UI frameworks like UIKit from http://www.yootheme.com .
    Really easy to use, but sure Bootstrap is richer 🙂

  • Josh Rainwater

    I would definitely argue that ‘Community’ gets at least a couple votes. I’ve done enough projects where it has been the overwhelming deciding factor for use… the community support outweighs pretty much all the potential negatives of bootstrap.

  • Pingback: Weekly News for Designers (N.328) | Tech +()

  • Pingback: Weekly News for Designers (N.328) - Cocopine Web Solutions()

  • Pingback: Weekly News for Designers (N.328) - Diseño Multimedia | KornukopiaDiseño Multimedia | Kornukopia()

  • Pingback: HTML5 WEEKLY NO.233 – ENUE()

  • Pingback: Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №205 (28 марта — 3 апреля 2016) - itfm.pro()

  • Pingback: Дайджест продуктового дизайна, март 2016 | Юрий Ветров об интерфейсах()

  • great article

  • damir

    Thanks for sharing. Awesome article

  • ABEL D

    I am used to foundation 5, 6 and bootstrap 3. When It comes to customization, bootstrap gives me some headaches while foundation goes smooth. I read this article just to see how bs 4 is. I think I can give it a try.

  • Boogie

    I like Booty. Bootystraps.

  • Jonatan

    There is also one more player worth to consider – UIKit http://getuikit.com/

  • SUDOisEvil

    The “Design” metric result makes no sense as Foundation is openly “un-styled”. The opinionated nature of Bootstrap design makes it difficult to neutralise, whereas Foundation is already neutral and expects you to supply the design. Which you go for will depend on your client and your future expectations for a site. We still use both depending on the client.