Bootstrap Vs Foundation

This tutorial highlights the overview of important differences between the UI frameworks Bootstrap and Foundation. If you are not familiar with these frameworks, please the introduction article on bootstrap and foundation.


For last couple of years, advancement on the mobile technologies are enormous. Data access using the mobile devices like Smartphones and Tablets overtook the Desktop users. It becomes necessary for every website to provide their mobile support for the better user experience. If you use the plain JavaScript or CSS frameworks for designing your websites, you have to spend extra time for making it work on different devices. To reduce the effort on multiple devices support, responsive design become more important when you design your website.

Foundation and Bootstrap are more popular in providing the responsive design for the website development. There are many other frameworks in the market, but these two are considered as the leaders and most of the developers already familiar in using these frameworks. This tutorial explains the most prominent difference between these two frameworks.

Default Look

One of the important attention given to the frameworks by UI developers are the default look and feel of supplied resources. Bootstarp supplies very good look and feel with the default themes and developers need to change only little things. Where as in the foundation, developers has to change many of the default values to make the page looks nice. This is over kill for knowing the default values and changing them.

Mobile First

Bootstrap and Foundation focuses on the mobile first approach. The files are designed to keep the mobile first in mind. However, Foundation has focused on this from the early days of development. Bootstarp has came through this way from the release of version 3. Those spending any measurable amount of time developing mobile sites will find Foundation’s mobile first approach makes for easier development on a small screen.


Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. Less is a CSS pre-processor – it extends the CSS language. Foundation uses SAAS and Bootstrap uses LESS. Overall, using the SASS is good in the many reasons. But, if you are familiar with LESS, that is good to continue.

With the above comments, Foundation differentiates itself from Bootstrap by more design oriented while focusing on responsive, mobile web development. And many other features makes many front end developers who are using the Bootstarp migrating to the foundation framework. At last, the final decision is up to you and your project team. If you are working on these fraemwork, please write your experience here.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This

Share this post with your friends!