Bootstrap vs Foundation

Posted on October 14, 2015

Nowadays websites are very often displayed on many different devices, such as phones, tablets, desktops, TV screens and even watches. It forces developers to create websites using Responsive Web Design technique. In other words – we have to design pages in such a way, that they will adapt to the size of given device.

The number of search engines is another problem – every and each one of them reacts to our code in a different way. In both cases developer can get a support from frameworks like Bootstrap and Foundation. Those two are the most popular front-end frameworks at the moment. Thanks to them we can create responsive web applications that will be supported by most of the search engines in much quicker and easier way than before.

Often in life you have to choose from two very similar options, while also taking many other conditions under consideration. Bootstrap vs Foundations is definitely one of these situations. I will try to show you some of the most important differences between them.

Bootstrap is without a doubt the most frequently used framework. They themselves say, that “Bootstrap is the most popular HTML, CSS and JS framework for developing responsive, mobile first projects on the web”. On Github it gets 85,5k stars, while its rival – Foundation, stopped at 21k. Thanks to that popularity, you can easily find a lot of Bootstrap tutorials, plugins, templates and add-ons. Foundation community is a lot smaller, so finding a good tutorial or plugin might be a lot harder. Luckily, its authors offer courses for companies.

While this article is being written, Bootstrap is in version 3.3.5 (you can download alpha version of 4) and Foundation in 5.5.2, therefore I will refer to them in those versions. Let’s go – Bootstrap vs Foundation!

Grid system:

The most frequently used mechanism is the ‘grid system’. In both cases 12 columns are used. In Bootstrap they have to be placed in the element with class “row”, which we should be placed in, depending on our needs, in basic ‘container’ or ‘container-fluid’. What’s the difference? Well, ‘container-fluid’ adapts to the entire width. In Foundation we can skip the container phase.

The markup here looks like this:

Bootstrap:

<div class=”container”>

        <div class=”row”>

         <div class=”col-sm-6 col-md-1″>Lorem ipsum</div>

         <div class=”col-sm-6 col-md-2″>Lorem ipsum</div>

         <div class=”col-sm-12 col-md-9″>lorem ipsum</div>

        </div>

</div>

Foundation:

<div class=”row”>

        <div class=”small-6 medium-1 column”>Lorem ipsum</div>

        <div class=”small-6 medium-2 column”>Lorem ipsum</div>

        <div class=”small-12 medium-9 column”>Lorem ipsum</div>

</div>

A fundamental difference between Bootstrap and Foundation is the fact, that in the case when you don’t fill all 12 columns or there are more than 12, in Bootstrap the last element aligns to the left “float:left”, while in Foundation to the right “float:right”. Though all you have to do to align element to the left in Foundation is addition of class ‘end’.

These differences has been shown on the pictures below:

Bootstrap (click on the image to enlarge)

Bootstrap

 

Foundation (click on the image to enlarge)

Foundation

Foundation also allows us to use block-grid option, which makes work easier. While using minimal markup, we can create a list of equal width and height blocks. All you have to do is to define how many blocks will be in each verse. Of course, you can also set it up, so one block will be displayed on small screen, 2 on medium and 4 on big. For example:

<ul class=”small-block-grid-1 medium-block-grid-2 large-block-grid-4″>

<li>Lorem ipsum</li>

<li>Lorem ipsum</li>

<li>Lorem ipsum</li>

<li>Lorem ipsum</li>

<li>Lorem ipsum</li>

</ul>

Media queries:

While coding responsive websites, breakpoints are very important thing (that’s where our layout changes). In this case Bootstrap and Foundation are also a bit different:

Bootstrap:

Screens Viewport Size Container Width
Extra small screens < 768px auto
Small screens ≥ 768px 750px
Medium screens ≥ 992px 970px
Large screens ≥ 1200px 1170px

Foundation:

Screens Viewport Size
Small screens ≤ 40em (640px)
Medium screens ≥ 40.063em (641px)
Large screens ≥ 64.063em (1025px)
XLarge screens ≥ 90.063em (1441px)
XXLarge screens ≥ 120.063em (1921px)

By deafult XLarge and XXLarge are turn off and to use them, you would have to turn them on (I never had to do it, by the way).

Units

In this regard Bootstrap and Foundation are also different. To define all widths, paddings and so on, Bootstrap uses pixels – which is a lot more intuitive solution for graphics. As for Foundation then – it uses rem (root em) and in my opinion, it’s a much better choice right now (we live in responsive websites age) thanks to the fact, that Foundation uses proportions, and not absolute units.

Obviously it’s a very personal choice, so I recommend to read up on the differences between pixels, ems and rems. I would also like say, that Bootstrap in version 4 transform pixels into rems.

Customization options

Bootstrap, thanks to its large community, offers a lot of ‘ready to use’ theme colours and theme generators, where you can define a lot of options (text colour, size of the text and paddings etc.).

On the other hand, Foundation, has a lot less ready to use presets, but before downloading this framework, we can define, for example, number of columns in the grid, colours and we can also choose the components we really want to download. In other words, you can download only the grid you need, which will definitely make the file smaller.

Summary:

Obviously those are only the basic information concerning both frameworks, though I think they are the most important while beginning your adventure with mobile development.

As I already said, there is no clear choice between Bootstrap and Foundation. I think it’s a bit like choosing between sports car and a limo. Both can ride, both can take us from point A to point B and the rest depend on our personal preferences.

I use both frameworks, depending on what I’m actually working on, but if I had to choose, Foundation would be my choice, mostly because I like it’s grid system and block grid system more. I hope that you will find the article above helpful. Choice is yours.

 

Piotr Drapich

Junior Front Developer

  • Nice write up! In your conclusion you mentioned Bootstrap has a block grid. I know Foundation has a Block Grid but didn’t think Bootstrap had one.