Bootstrap 3 and Foundation 5: Use the best from both

Bootstrap 3 and Foundation 5 combined

Two superb frontend frameworks, but for production you don't want the whole thing. You want your favorite parts, and here's how!

Want to use parts & pieces from both frameworks? Here's how!

With Foundation 5 out just a few days ago and BS 3 being pretty fresh, chances are you will find useful frontend goodness in both. Why not use both?


I won't introduce either framework, as that is well covered elsewhere. Check them out here:

Both frameworks are well modularized by now, so it's fairly easy to use add in your favorite UI elements from Bootstrap 3, and pull in, say, the grid from Foundation 5.

Sass, LESS and plain CSS

Bootstrap is on LESS, while Foundation uses Sass. While we all hope and pray that BS one day will make the switch (death of LESS?), we have to deal with the issue.

My first thought here, was to just use one of the excellent BS Sass ports available. That would indeed be sweet, except that I kept running into minor bugs with both of them when it came to overriding BS3 settings. That's a turnoff, as that is the very reason why we want to use a precompiler.

My next thought, was just to use the CSS versions of each individual BS partial. Well, that means I would have to run LESS alongside Sass to create them, and that just feels wrong.

The method I ended up embracing, feels somewhat non-dev'ish:

I use Foundation 5 + Sass as the main setup (using Bower + the gem), and then I use the Bootstrap customizer to give me the UI elements I actually need. Now, that has some obvious downsides: Clicking around in browser? No dev workflow? And most importantly: How does the next dev know what is actually included in the minified BS CSS? Here's the beauty of it: while you do need to click checkboxes to get your file, you do get a config.json file telling you exactly what elements you did include (both CSS and JS components). Include this in your repo, and voila, you have a version history. Here is an example.

Link to the bootstrap-customized.css, and you're good to go. If you don't want that extra request to your bootstrap-custom.css, level up with Grunt to combine them.

What styling components to use from BS3 vs F5

Honestly, it's a matter of taste; they are now both slimmed down and less opininated, and very well crafted. That said, since I'm using Sass as my main setup, I try to stick to Foundation when possible. We want to avoid making overrides in the BS customizer web UI (or overriding in the CSS!).

Some elements are Bootstrap only, however:

  • Modal window
  • List groups
  • Some of the navs
  • Advanced table options
  • etc

And some functionality you will find in F5, not in BS:

  • Swipable slideshow
  • Interchange responsive content loading
  • Offcanvas navigation
  • Flexvideo
  • Etc

Of course, we only include the components we actually plan on using. No bloat! #Nobloat.

Javascript elements

Including JS elements from each framework, is as easy as just picking the ones you want, and link to them. Both need a global foundation.js/bootstrap.js file in addition to each little piece. If you're feelin' pro, you'll use Grunt to concatenate them in the end. Win! I have seen no conflicts so far.


Importing the Foundation partials you need seems like straight forward job. But lo and behold; there are dependencies! Importing a nav might also import the grid or full typography; be carefull to check the first line in each partial before importing; that might result in less scratching of heads.


I don't need to choose Bootstrap OR Foundation for my prototyping/production sites (but when I do, I choose Foundation).

Let me know in the comment section if you have any comments!