Should You Use Bootstrap or Foundation?

Photograph of empty picture frames on a wall.

(Photograph from Flickr user Uppy Chatterjee)

I’ve been teaching web design in some capacity for about 5 years now, and lately one of the most frequently asked questions is, “Should I use Bootstrap or Foundation?”

Bootstrap (currently at v3.2) and Foundation (currently v5.3) are the two most popular front-end frameworks right now, so it’s certainly a sensible question to ask. Choosing between Bootstrap or Foundation is like choosing between red or white wine; one isn’t necessarily better than the other, they just pair well with different things, and people tend to develop personal preferences.

However, this isn’t just fuzzy taste buds we’re talking about here. This is code, with explicit logic and intent. So, there has to be some kind of difference, right? Let’s dig in.

Free trial on Treehouse: Do you want to learn to code? CLICK HERE FOR A FREE 14-DAY TRIAL.

Grid System

The most prominent part of a front-end framework is the grid system. It’s the core feature that enables designers and developers to rapidly prototype layouts and make quick changes with confidence. Foundation has always been slightly ahead of the curve in this area; it was the first big framework to go responsive and also the only big mobile-first framework for a period of time. However, Bootstrap also has these features in place now. The syntax for creating grids can be slightly different, so this is an area where personal preference might come into play, but it’s easy to create equivalent code snippets that do almost the exact same thing in both frameworks.

Screenshot of http://foundation.zurb.com/docs/components/block_grid.html

Block grids in Foundation can convert an unordered list into a grid.

Currently there are a few grid features in Foundation that might make it a better option in specific instances. My favorite is the block grid. This makes it simple to split the contents of an unordered list into an evenly spaced grid. Just specify the number of elements in each row and Foundation takes care of the rest. Foundation also has the ability to easily collapse columns and remove gutters with the collapse class, or center columns with the centered columns syntax.

Sizing Units

For calculating widths, typography, and nearly everything else, Bootstrap uses pixels and Foundation uses rems. There are functional differences between these two units that are important to understand, but both are capable of producing the same results. In other words, it’s mostly personal preference.

Pixels might be a little bit more familiar to graphic artists and new web designers, but I personally prefer to use the rem unit. Pixels are an absolute unit, but in the age of responsive design, a relative unit like rems helps me think in terms of proportions. Like I said, this is really a matter of perspective and personal workflow, so if you really love pixels, Bootstrap might be for you.

I admit, learning about the differences between pixels, ems, and rems is boring for most people. However, if you’re not familiar, it’s well worth taking the time to read this article from 2011 about font sizing with rems because it will save you lots of guesswork in the future.

Features and Components

At first glance, both frameworks appear to have a very similar list of pre-built components, but there are some slight differences that could help you make the decision.

Foundation has built-in form validation through Abide. That’s not to say that Bootstrap couldn’t also have form validation, but for some, the pre-made Foundation solution might be a nice head start. Foundation also includes Interchange, which is a robust solution for responsive images, although it might be more than you need. In addition to these two, there’s other handy features like right-to-left support, pricing tables, tours, and off-canvas navigation.

Bootstrap isn’t quite as feature-full, but in my own opinion, I also feel like many of Bootstrap’s features are in a more complete state. In other words, the default look of Bootstrap components seems more suited to quickly building a one-off website and adding a theme. Bootstrap also now includes responsive embeds, which makes it easy to add responsiveness to elements like <iframe>, <embed>, and <object>.

Customization

The ability to customize the visual appearance of each framework is hinted at in the names of the frameworks themselves. Bootstrap tries to give you everything you need to get a site up and running quickly, while Foundation tends to provide a better environment for customization.

Screenshot of http://bootswatch.com/

Sites like Bootswatch provide high quality free themes for Bootstrap.

Bootstrap tends to make sites that look like they were made with Bootstrap. It’s only after adding a theme or digging deep into custom styling that the default look starts to fade. This “Bootstrap look” is underscored by the fact that Bootstrap gained more early popularity a few years ago. Foundation’s default look feels closer to browser defaults in many cases, which makes it (slightly) easier to mold into a unique aesthetic.

It’s also worth pointing out that Bootstrap tends to have a wider variety of themes readily available. Foundation themes are also available, but they’re not quite as abundant. This is important, since variety is probably one of the most important things about themes.

Free trial on Treehouse: Do you want to learn to code? CLICK HERE FOR A FREE 14-DAY TRIAL.

Bootstrap or Foundation: The Verdict

For completeness, I should mention two areas I did not cover: browser support and performance. That’s because browser support and performance for both frameworks is so good that the differences are almost negligible and are highly dependent on the context. Some permutation of different framework components and browser environments might have a trivial performance gap. In other words, the important differences revolve around features that support designers and developers.

Even with the differences I highlighted in mind, I don’t think either framework has a massive advantage. However, I personally prefer using Foundation because of its slightly more robust grid system. When I design new web projects, I always start by thinking about the mobile experience before I move on to larger screen sizes, and I personally feel like Foundation has a slight edge with block grids and collapsible rows. However, I do still enjoy using Bootstrap when I just need a quick site without much customization, because I find that Bootstrap is easier to theme.

Of course, I’d like to hear from you, too. Do you prefer Bootstrap or Foundation? Do you use both? Let me know in the comments!

Join Nick on his course How to Make a Website

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Nick Pettit

Nick is a designer, public speaker, and teacher at Treehouse. He is also a co-host of The Treehouse Show. Twitter: @nickrp

Comments

24 comments on “Should You Use Bootstrap or Foundation?

  1. Foundation every time for me, it provides pretty much all I need for the “foundations” of a website – It appears to be more ‘bare-bones’ than bootstrap and found that it is easier to lay a completely custom looking site design on top of it unlike bootstrap which has more pre defined styling already in place.

  2. Out of the two I would say Foundation would be my no 1 choice.
    Seems like design-oriented people tend to choose Foundation while more developer-oriented people go for Bootstrap.

  3. People overuse Bootstrap without much customization, which created a website disaster all around the world making all look same or similar. While Foundation, requires much more customization and personal touch, leaving it for more intermediate to advanced level of front-end developers and designers to take advantage of…

    I should say both frameworks brought a totally new era of development style to web world.

  4. Hey this is somewhat of off topic but I was wondering if blogs use WYSIWYG editors or if you have to manually code with HTML. I’m starting a blog soon but have no coding skills so I wanted to get advice from someone with experience. Any help would be greatly appreciated!

    • Almost every blog uses some sort of CMS (content management system). This blog runs on WordPress, which is the most popular CMS and blogging platform. There are others out there like Medium and Tumblr. I’m sure some blogs manually code HTML, but it’s pretty rare to see just because it’s so much more cumbersome.

  5. “That’s because browser support and performance for both frameworks is so good that the differences are almost negligible”

    That’s simply not true. Foundation doesn’t support anything less than IE9, whereas Bootstrap supports IE8, that makes a huge difference if you’re building sites that need wide-ranging support.

    • Agreed. I was going to post this as well. That’s a HUGE differentiator in the Enterprise world, where we are stuck supporting IE8.

    • Yes. That was exactly the reason, a year ago, why I lost interest in Foundation. In 2013, support for IE8 was still necessary. This is especially true if you’re building marketing websites that are not meant to last for years (but at least for as long as the campaign is running).

      Both are a quick win for prototyping, however, if content dictates design, then how relevant are these frameworks really? Unless you design with such a framework in mind. But that’s quite a constraint you put on your design freedom. Unless you know how to tweak the components of these frameworks, which requires a deep understanding of such a framework and good CSS skills. And I mean real good CSS skills.

  6. Great article! In most projects I was involved I was required to use bootstrap, but personally I love working with foundation more.

    IMHO foundation uses more semantic code, but using preprocessors, it’s all the same more or less. But mobile-first and responsive design is what I like more about Foundation..

  7. Between the two I would choose Foundation for a few reasons. It’s built using SASS, it has some extra features that you need to hack Bootstrap to get to work and its more semantic. My current site uses purecss.io, but for a client I would use Foundation.

  8. Bootstrap does have an official Sass port now.

    That said, I use either bourbon/neat or foundation depending on the project. I’m a huge fan if Zurb, but not a huge fan of their design. For me, bourbon is easier most of the time because I can customize it quicker.

  9. It really depends on the project for me. If I’m working on more of an application type experience I generally choose Bootstrap and theme over top of it. On the other hand for websites I almost always choose Foundation.

    Both frameworks definitely have their uses and I think its almost impossible to say one is better than the other. Bootstrap allows me to quickly prototype an application screen, but when working on websites I generally have more time to work and customize.

  10. I’ve been loving Foundation since 3. From time to time I’ll try/use other frameworks but always come back to Foundation. Installing with Bower gives you the option to only use the CSS/JS you need for your project, keeping your files light. If something comes where you need more features (which surely always does) you can uncomment them back in and your ready to roll. Their new equalizer.js feature is super hot too…

  11. I usually find myself using Foundation for the frontend of a website because of block grid, interchange and ease+speed of customisation. I usually use Bootstrap for a backend or a web app because of the huge number of plugins & widgets available.

  12. I have been doing a lot of bootstrap lately. I have no complaints once I started doing the layout their way instead of forcing my own preferences upon them :)

    My decision between bootstrap and foundation was really easy. When talking to ppl, about 2 out of 3 would say “what is foundation?” Factor in the advantage of number of tutorials and the decision was made for me.

    Disclaimer: nobody will ever discuss the ambience of my web sites. They are working beasts developed to aid in analysis. So YMMV.

  13. A great article. It certainly seems to be a hot topic of late. I currently use Bootstrap. I find that frameworks are a great asset in web design.

  14. Personally I prefer Bootstrap, the main reson is that it doesn’t brake other components layout, Foundation has styles applied for tags like button, table, label so on, and it cusses problems sometimes. Second reason is that Bootstrap has more complete and finished components and less JS bugs, for example Bootstrap popovers adjust to fit in screen, and even pointer arrow changes it position. I had experience when I had to add this reafutres to Foundation dropdowns rewriting JS component.

  15. Great article – I prefer foundation, I find it more adaptable to my needs, and personally i find the menu to be more adaptive to mobile right out of the box.
    With regards to IE8, I just add respond.js to handle media queries, and with any project we do, we code as best as possible to make it work for IE8, but focus more heavily on IE9+ anyway.
    I think it really comes down to preference though, I use both but prefer foundation, and even use the skeleton framework (very lightweight) for really small simple stuff.

  16. I think that both of them are quite good, but for small projects they are too much. I for example just had to develop a small web app (it was a test by a company for a job application, so just one page without advanced layout features or so, but under time pressure) and I tried Bootstrap and one of the basic templates – but found out that it was much much easier and faster to make this completely from scratch (With the stuff you learn in the first Treehouse-Courses :-) ) without Bootstrap and the “Divitis” it provided.