State of affairs: Bootstrap 4 vs Foundation 6.3

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


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 Bootstrap 4 may be very well used as a daily driver. Let us explore the current status of both frameworks, their features, flaws and decide which one is better suited to your needs.

Edit 12/03/2017:

Time has passed, and even though Foundation was initially a bit behind in terms of testing and quality, it has finally the reached the stability we are looking for. I have updated most of the items below considering how far Foundation has come.

Current status

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

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


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.

Bootstrap is a little bit ahead when it comes to JS for the fact that their components are simpler, less bloated and well tested. Foundation on the other hand, has way more JS toys to play with, which is always handy. In the past, Foundation used to provide a single JS file with all components packed into it, which is no longer the case. Both Foundation and Bootstrap will allow you to choose which JS components you want if you decide not to use Babel.

Foundation was rewritten in ES6 about a year ago, which has given it enough time to iron out any issues and bugs thanks to the community.

Winner: Foundation 6


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 as a daily driver.

Foundation, on the other hand, was released as “stable” a little over a year 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.3 the team changed quite a few things making some settings obsolete and introducing stuff like ES6 on 6.2. The offcanvas was revamped and the settings are very flexible in 6.3.

Since Foundation 6 has been out in the wild for longer, exposed to more production environments, it’s stability is now excellent. Components seem to be well tested and the team is releasing updates almost every 3-4 months.

Winner: Foundation 6


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


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


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


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 a bit further by including 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 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)


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


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.

Bootstrap 4 shouldn’t be any different as most class names were kept the same, which means that porting plugins to v4 shouldn’t be too difficult.

Winner: Bootstrap 4


If you are coming from Bootstrap and are familiar with it, then maybe you should checkout v4. 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. I have to say though, that their alpha milestones are taking an eternity to be reached. The project has been sitting in alpha for over a year.

Foundation, on the other hand, is feature rich and because it has been out in the wild for a while, it gives it an advantage over Bootstrap 4. Components are well tested and working smoothly. Bugs are constantly being fixed and the team behind it seem to be on top of things. So, if you have used Foundation in the past, or are looking for something different, then consider Foundation 6.

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 😉 —

    • 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?

      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.

    • Perinban Parameshwaran

      Ya i too get it as the same way. Is there any possibility to correct it?

    • Carlos Saltos

      Time has pass by and as for Semantic UI 2.3.1 it fully supports mobile

    • 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 ;-).

    • Tùng Red

      I used Semantic UI for my last project since Sep 2016. Excellent UI/UX/DX <3 Also, the docs page is very helpful & well designed.

      I don't have any experience with both Bootstrap & Foundation, so came to this post for choosing a proper one for the next project. It's good to see your mention about Semantic UI, thank you 😉

    • hipertracker

      Semantic UI is not mobile first. This is a huge drawback.

    • Yves Amsellem

      What made you think that? Every component (especially grids) have their mobile counterpart.

    • hipertracker
    • Carlos Saltos

      Time has passed by and as for Semantic UI 2.3.1 it fully supports mobile

  • 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

    • 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 vs. Avalanche Grid System

  • 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 [ ]. 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.

    • emrah

      It has been ages. Still alpha.

  • Will

    In addition to Semantic UI, 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 .
    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) -

  • 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

  • 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.

  • Josh

    Very Cool, Thanks!

  • Gerardo Aguilar

    Niet. Long live to Foundation! Awesome framework , nothing else to say

  • numediaweb

    Bootstrap is not stable at all (Alpha 6 has big difference with Alpha 5: see the navbar allign right). Foundation is much more easier to customize than to BS (unless “Bootstrappish” website doesn’t hurt your design)

  • Sebastian

    Semantic is fine, but heavy.
    Check UIkit 3 ( in Beta 12 now ). It´s clean and neat.

  • Thanks for the update! Sticking with Bootstrap for now, it just works the way I expect it to, and looks generally good and well designed overall. (it is good enough and a known commodity) Love hearing options though! Great review.

  • Mark

    Foundation 6 is the winner for me.