Bootstrap vs. Foundation: Which Framework Should You Choose? [Infographic]

So you are planning a new web design project and considering one of the world’s two most popular design frameworks to help you create a fully-responsive and modern site outline. But what’s better: Twitter’s Bootstrap or Foundation by Zurb? The answer may lie in what you are trying to accomplish.

But to start, you should understand what a framework is and what it can do for you. A framework is a collection of tools for creating websites and mobile applications. (Both frameworks in this infographic are responsive and can lead to beautiful websites.) Framework packages include files and folders of standardized code (HTML, CSS, etc.) as a basis to start building a site. Since many websites have a similar structure — think about the beams that make up a building — a framework makes it so that developers don’t have to start from scratch with coding, saving time and effort.

So what are the advantages of Bootstrap and Foundation? This infographic has the answer.

Bootstrap vs. Foundation

Bootstrap vs Foundation

Share this Image On Your Website

If you would like to be kept up to date with our posts, you can follow us on Twitter, Facebook, Google+, or even by subscribing to our RSS Feed.

Newsletter

20 Comments
  1. Amit Panishap Jul 25, 12:04 am

    Bootstrap is more comprehensive and feature rich as per my understanding.

    Reply
    +13
  2. Benjamin Jul 25, 4:05 am

    I’ve worked with both, foundation for me is just a powerful and semantic grid system, where BS3 is not only that but a complete set of UI utilities, up until Bootstrap 3 foundation was the way to go for grids. It had a unique feature: the ability to nest grids, that feature is now standard in almost all grid systems.

    Though Zurb’s foundation was the way to go a year and a half ago, is still quite popular, and their email framework “ink” Is unmatched, And for those willing to get that kind of flexibility for emails, this is the way to go !

    In my humble opinion It would be much interesting to compare BS3 with something like Semantic UI, they both offer a comprehensive set of UI widgets, though Semantic UI is still under Beta (not 100% ready for production) it looks quite promising.

    What really pays a difference here is the giant community around BS3, you can get anything done, and for those of us using a JS framework like AngularJS there’s nothing better that BS3 “angular-UI-Bootstrap” a set of matched directives for BS3, all widgets are compatible and ready to go, buttons, modals, accordions, feels like visual basic for the web ;-)

    Like it or not BS3 has beat all UI frameworks out there, but this is the web and nothing last forever, maybe thinks like web components and polymer will eventually kill the need for a one for all UI framework… the future will tell.

    Reply
    +32
  3. Mehdi Jul 27, 2:28 am

    Hidden due to low comment rating. Click here to see.

    Reply
    -17
    • Amit Panishap Jul 27, 10:30 am

      Bootstrap uses CSS, HTML, JavaScript, LESS AND SAAS. So yes, you need knowledge for CSS and HTML.

      Reply
      +9
      • Mehdi Jul 27, 3:19 pm

        Thanks a lot for your reply!

        I guess I will start learning HTMl & CSS once I become good at what I do now.

        Reply
        +3
  4. Caitlin Rouleau Jul 29, 5:51 pm

    I use Bootstrap more frequently, but I have used Foundation. It’s good to have an understanding of both, however, I think Bootstrap is the better option of the two.

    Reply
    -1
  5. Kirk Bater Jul 29, 6:08 pm

    As someone who regularly uses and contributes to Foundation I have to add in that Foundation also has an X-Large and an XX-Large grid as well. They’re not enabled by default, but they are available in the settings.scss file.

    I haven’t used Bootstrap, but I know that you can also rapidly prototype with Foundation.

    In another aspect, though, if you’re ever looking to reduce the bloat of your framework, I highly recommend only compiling the components that you need, and then before you deploy to your production environment run something like Grunt’s Un-CSS to get rid of any unused classes.

    Reply
    +1
  6. Ty Cahill Jul 29, 7:06 pm

    I use both–Bootstrap more often, but I prefer Foundation. The infographic (coming from a company that sells UI elements for Bootstrap) is a bit off and perhaps bias from the very beginning, where the lady in the graphic is emphasizing Bootstrap by pointing to the nicely aligned logo, while the Foundation logo is off-center and appears to be grayed out.

    To start, they both have a mobile-first approach, but BS is labelled as “Desktop, Tablet, Mobile,” which makes it appear that it supports more than Foundation.

    The grid used by BS is not SM-XL, but XS-LG. A smartphone is considered extra small, which has always seemed awkward to me.

    The “compact UI elements” of Foundation are often viewed as a strength over the “extensive UI elements” of BS if you want performance and less bloat (generally speaking, of course).

    The “design it yourself” approach of Foundation prefers custom site designs that are unique, while many BS sites tend to look alike.

    I think they’re both excellent frameworks, but I wish they would have included some graceful degradation for older IE browsers instead of eliminating them from the projects completely. Many of my sites still see 10% of visits coming from IE8 and earlier, which is still a significant percentage. (Are you willing to take a 10% pay cut?)

    Reply
    +16
  7. Christopher Jul 29, 7:24 pm

    Great comparison. Thanks! I’ve been using Foundation for 2 years and love it. I’ll give Bootstrap a try. Always good to know both.

    @Mehdi – it’s a good idea to learn CSS and HTML before jumping into any framework. It will help you tremendously.

    Reply
    +1
  8. Stephen P Kane Jul 29, 8:28 pm

    Thanks Adrian for the Excellent post. And Benjamin and Ty for helpful comments. I’ve been using the open source Shoestrap 3 theme (Bootstrap, HTML5, Less, Redux) on a lot of projects this past year. Shoestrap was initially Bootstrap exclusively but the project added Foundation and Sass support recently and this post gives me incentive to finally explore Foundation.

    Reply
    0
  9. Darren Aug 1, 5:18 am

    I’ve been using Foundation for years, I avoided Bootstrap since version 1 in favor of Foundation’s fluid grid . I’ve had to use it on a project and was surprised how similar both grids are now. The only real difference is the components that ship with it. What’s interesting is who pushes flexbox, calc() etc into the mainstream first…

    Reply
    0
    • Ty Cahill Aug 5, 5:45 pm

      @Darren, another big difference between the two is their philosophy. I’ve often heard Bootstrap described as being good for prototyping and proofs of concept, since it has most everything built in. For Foundation, here’s a FAQ from Zurb’s website that covers a lot of their philosophy…

      Why Doesn’t Foundation Have as Much Styling as Bootstrap?

      “We purposely left our styles sparse. We didn’t want to end up in a world where all the sites looked like Foundation. You can add to our defaults easily without having to undo a bunch of styles baked in. It also helps with integration and alleviates code bloat. But you don’t have to take our word for it. Here’s what one of our Foundation fans and friends who also helped us with the latest version of the Yeti, Adam Fairhead, has to say about it:

      “Foundation focuses on being a great framework, so I can focus on being a great developer. By being thorough in its grids and components, but un-opinionated in its presentation, it allows me to work quickly through common elements so I can spend my time building out the custom parts.

      http://zurb.com/article/1224/11-things-you-didn-t-know-about-foundatio

      Reply
      +5
  10. Vesa Aug 5, 1:26 am

    I’d recommend to avoid frameworks which love !important rules. That is the first sign that you might have problems with the framework in big projects.
    bootstrap.css contains 63 matches for !important. (I don’t know what’s the situation with Foundation.)

    Reply
    +3
  11. Ty Cahill Aug 5, 5:39 pm

    @Vesa, very good point! Sometimes an !important is necessary, like where AngularJS uses it to force elements to be hidden, since any other rule would have more specificity and could prevent an element from hiding. But I’ve also used Kendo UI and they appear to overuse !important, making it extremely difficult to change styles. In general, using !important is lazy and sloppy, and you make a good that frameworks using it can really complicate large (and even small) projects.

    Out of curiosity, I just did a quick search in Foundation 5.3’s CSS file and there are 221 !importants, which seems excessive. But I looked through some of the CSS and many of them appear to be used for good and not evil. They are in grid rules and some “helper” rules where you’d want them to overrule any other styles on the element. For example, the .right class uses !important to force things to the right, which seems appropriate. It seems (from using both frameworks) that Foundation takes a more specific and deliberate approach to design. In the end, they’re both good frameworks and similar in many ways.

    So I guess what’s most important is to go through the CSS of whatever framework you’re considering and understand what it’s doing and make sure it’s doing it correctly.

    Reply
    +1
  12. cythux Aug 17, 8:32 pm

    I use it both but more foundation now, because i found site was using bootstrap are overused

    Reply
    +1
  13. Dan-Excel Aug 21, 9:05 pm

    I have worked with both platforms and a third one (that I will not mention). My biggest gripe has to be the navigation systems and the issues you run into when theming for a specific CMS (content management system). You can easily find solutions for the popular CMSs like WP Drupal and Joomla. Anything else requires you to roll up your sleeves and dig in. They both have good factors, but I avoid using them in favor of collecting and combining a number of tools like a grid system, video, image and text slider, fonts and so forth. In doing so, I am prepared for whatever and never have to get sidetrack.

    Reply
    0
  14. Curtis Sep 4, 5:29 pm

    This infographic is way off… You’re better off taking a look at each of their websites and comparing components. You will find that Foundation 5 has a very extensive grid system and component selection.

    I have used both frameworks since the first released versions, and I really have to hand it to Foundation at this point in time. Perhaps in the beginning bootstrap was a better choice, but times are-a-changin’.

    Reply
    +1
  15. y1779 Sep 16, 9:54 pm

    Bootstrap has bigger community because it came first. Being “First” doesn’t mean that it is and will always be the best.

    I start doing front end since Foundation 2. And at that time, Bootstrap is just way too confusing to use. Maybe it’s because it came from a newbie point of view. But, hey, if a newbie can easily understand Foundation more than Bootstrap, does it still make Bootstrap better because most advance and pro devs use it?

    Well… :)

    Reply
    0
  16. Lulu Sep 25, 11:20 pm

    I’m an Interaction / UI Designer who’s used both frameworks and they both have their pluses and minuses. When a front-end developer is not an option and the site/app being produced is for enterprise purposes Bootstrap is a great choice; if working with a front-end developer is an option or the person creating the CSS has a grasp of semantic naming conventions Foundation offers more flexibility.

    My employer chose Bootstrap due to it’s ability to play nice with MVC early on but in general I lean toward Foundation. If only Foundation had the community Bootstrap does…

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters