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


  1. Amit Panishap Jul 25, 12:04 am

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

    • Rafi Feb 19, 11:14 pm

      Not really more feature rich, in fact Foundation has 2 more core components.

      But what really matters to most is how easy it is to customize. People say Foundation is much easier.

  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.

    • Rafi Feb 19, 11:16 pm

      This is a fair assessment. Is it safe to say the UI widgets are the most important difference in your opinion?

      We wrote a blog post about how Foundation is addressing the knocks on frameworks – – Would love to hear your thoughts in the comments!

  3. Mehdi Jul 27, 2:28 am


    Thanks for sharing !

    I’m a webdesigner and I didn’t start learning how to code yet, but I will and I guess I will choose Bootstrap among these two frameworks, but I still don’t know how to start using it? I mean do I need to learn CSS and HTML first, or reading about Bootstrap now before starting to learn how to code will help me on my designs ?

    Thank you.

    • Amit Panishap Jul 27, 10:30 am

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

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

  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.

  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.

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

  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.

  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.

  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…

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

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

  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.

  12. cythux Aug 17, 8:32 pm

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

  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.

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

  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… :)

  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…

  17. Jan Dec 2, 11:47 am

    Due to its omnipresence, I’ve almost exclusively used Bootstrap. What got me most excited though is Semantic UI, as it has all the features I missed in Bootstrap and the syntax is very nice. Maybe a worthy addition for future comparisons of this kind.

  18. Virendra Gawade Jun 25, 9:51 am

    I used both and i feel if you want to learn quick then go for Bootstrap . But Foundation also giving great features and its amazing……
    Foundation is BEST as compare to Bootstrap.

  19. Gunasekar Aug 25, 3:37 pm

    Am not a coder. I started from near zero with very ancient knowledge of HTML & CSS but could take a bootstrap 3 template and modify to look like how I wanted it. Now am excited about Bootstrap 4 and might even try the alpha.
    I have not yet looked at other frameworks including Foundation so don’t have an opinion yet.

  20. Nitesh Dec 17, 7:58 pm

    I am completely new to both.. i actually have php based site but i want to move to responsive and mobile friendly.
    Is it good choice to move to one of frameworks.

Leave a Reply

* Minimum length: 20 characters