AngularJS Material



Material Design Lite







Foundation or BootStrap? Tutorial

published 3 years ago

Should You Use Foundation or Bootstrap?

With the advancement of technology and the use of the internet, a lot of people further their qualifications with web design certificates and degrees. And one of the most frequently asked questions is “Which Framework should I choose: Foundation or Bootstrap”?

It’s certainly a sensible question, considering the fact that Foundation and Bootstrap are currently the two most popular front-end frameworks. Choosing between Foundation and Bootstrap is like choosing between rosé or red wine – not necessarily one is superior to the other, but rather they go well with different things, and often people develop personal preferences.

However, we are talking about code and coding follows logic, so there is a difference between these two approaches.

Grid System

The grid system is one of the most important parts of a front-end framework. The grid system enables developers and designers to make changes and create various layouts quickly. On this field, Foundation’s system development is always a step ahead – it was the first big framework for a period of time to go responsive as well as the only mobile one. However, nowadays Bootstrap also provides such features. The creation of grid in the two frameworks has its differences, and here personal preference makes the choice.

Sizing Units

For calculating typography and width, Foundation uses rems and Bootstrap uses pixels. Both units can provide the same results though there are functional differences between them. New web designers and graphic designers are more familiar with pixels and prefer them because they are considered ‘absolute’ units. Rems, on the other hand, are ‘relative’ units. Here again it all comes to personal preference – if you enjoy working with pixels, Bootstrap is the best choice for you.

Features and Components

The two frameworks appear to have very similar pre-built components lists at first, but when you examine them closely, you can find that they slightly differ from one another, and that can potentially help you in your decision.

Through Abide, Foundation offers a built-in form validation. Although Bootstrap could also provide form validation, for many the pre-made Foundation solution might be a nice head start. Also, Foundation includes Interchange – a great solution for responsive images. Moreover, there are other features in these frameworks that come handy such as off-canvas navigation, pricing tablets, tours and right-to-left support.

Many professionals state that although Bootstrap does not offer as many features as Foundation, features are more complete and thorough. For quickly building a website, adding a theme and customization, the default look of Bootstrap components seems more suited. In addition, Bootstrap also provides responsive embeds – they make it easier to add responsiveness to elements like <object>, <embed>, and<iframe>.

Bootstrap or Foundation

This article provides a comparison between the grid system, the sizing units and the features and components; it does not cover the topics of performance and browser support. That’s due to performance and browser support for both frameworks are equally good that the differences are highly dependent on the use and the context.

Even considering the differences outlined in this article, neither of the framework has a greater advantage over the other. Because of its slightly more robust grid system most developers prefer using Foundation. However, Bootstrap is the preferred framework for quickly designing websites that do not require much customization because generally Bootstrap is easier to theme.

In the end, both frameworks offer equally good and quality features. It is up to the designer or the developer to decide whether Foundation or Bootstrap is the framework for them.

More posts

Prestashop 1.7 is on the way!


How to Optimize Prestashop for Maximum Performance


Frameworks based on Material Design Specifications by Google


Lovefield: A JavaScript Relational Database


Bootstrap 4 Alpha is Here


© 2018 Xtendify Technologies