Bootstrap and Foundation are currently the most popular front-end CSS frameworks. Let’s compare the characteristics, advantages and disadvantages of each.
A Brief History
Bootstrap was initially created for internal use in Twitter. It was built by Marc Otto and Jacob Thornton in 2010. A year later, in 2011, it was released to public. Since then, Bootstrap has had more than 20 releases and has become the most popular front-end framework.
Foundation had a similar birth. It started in 2008 as an internal style guide for the ZURB design agency and became a public open source project in 2011.
Open Source and Community
Both frameworks are open source projects, released under the MIT license, meaning that they can be used and modified free of charge. However, with more than 84k questions on Stack overflow and more than 115k stars on GitHub, Bootstrap has a significantly larger system of community support than Foundation, which has only slightly more than 5k questions and around 26k stars.
Browser Support
Both frameworks support the following browsers: Chrome (Mac, Windows, iOS, and Android), Safari (Mac and iOS only), Firefox (Mac and Windows) and Opera (Mac and Windows). However, there is a slight difference when it comes to Internet Explorer — Bootstrap supports IE8 and more recent versions, while Foundation starts at IE9 plus more recent versions. So, if your web application needs to support older browser versions, such as IE8, Bootstrap might be a better choice.
Responsiveness
Bootstrap and Foundation are responsive out of the box. They apply the “mobile first” approach, which is a design methodology that states that it is better to create layout for smallest screens first, and then add more content and features as the screen gets bigger.
Grid System
A grid system is another thing that these two frameworks have in common. Both use a 12-column grid system that supports rows and columns and allows nesting.
However, Foundations offers more grid-related features. Unlike Bootstrap, Foundation allows centering columns, collapsing columns and removing gutters. Furthermore, Foundations supports a special type of grid, called the “Block grid,” that allows you to evenly split the content of a list within the grid. So, when additional grid features are needed, choose Foundation.
Additional CSS Styles
Again, both Bootstrap and Foundation include additional CSS styles for different page components, such as typography, tables, forms, buttons, pagination, etc.
Features Based on JavaScript
Many front end features that require JavaScript to be implemented are supported by both frameworks out of the box. These include, but are not limited to, sticky menus, carousels, modals and tabs.
CSS Preprocessors
Bootstrap includes both SASS and LESS files, meaning that it can be used in applications using any of these CSS preprocessors. On the other hand, Foundation supports only SASS, which makes Bootstrap the framework of choice when LESS stylesheets are needed.
Conclusion
Although Bootstrap and Foundation are frameworks with similar features, each of them is slightly better for specific use cases. If you need the support for IE8, Bootstrap is a better choice. If you need more grid features, such as column centering and collapsing, choose Foundation. If you prefer LESS over SASS, use Bootstrap. When all other things are even, pick Bootstrap, as it has larger community.