What’s happening with these front-end frameworks in 2024? Both have evolved their features over time. This post explores their strengths and weaknesses. Let’s take a look.
It seems like most developers are keen on the popular TailwindCSS nowadays. However, there are reasons why developers may want to consider Bootstrap and/or Foundation for their projects.
Use of Flexbox
Both Bootstrap 5 and Foundation 6 support the use of flexbox. Flexbox is especially handy for creating layouts. Want to center a div? Use flexbox.
Bootstrap’s layout system uses flexbox. It makes developing for responsive design easy to implement. It also includes utility classes to easily make elements display using flexbox.
Foundation also has support for Flexbox but it needs to be “turned on” using a Sass mixin. Until then it hinges on, and this is their words not mine, “a combination of floats, vertical alignment, table cells, and various other CSS hacks to get layouts looking right.” Like Bootstrap it includes utility classes for flexbox.
Media Queries
Both Bootstrap and Foundation make use of media queries to set breakpoints on layouts. However, Bootstrap has 6 default breakpoints and Foundation has 3 core breakpoints. They both make use of Sass maps to allow for the extension of breakpoints.
Foundation’s 3 default breakpoints are small, medium and large. Also, they allow for targeting medium and large only as well as for all sizes above medium and large. Confused? Yeah, it’s a little confusing. Certainly not as straight forward as Bootstrap’s media queries.
Bootstrap has 6 breakpoints: extra-small, small, medium, large, extra-large and double extra-large. Utility classes for targeting them are found throughout Bootstrap’s features. Check out Bootstrap’s documentation on it to see how robust it is.
Note: Foundation also includes media queries for portrait, landscape and retina.
The additional media queries found in Foundation are worthwhile. Personally, I’ve worked on projects where I missed not having them in Bootstrap.
Colors
Bootstrap is following the lead of TailwindCSS and developing a sophisticated color palette. There’s a huge variety of colors to choose from. Bootstrap forgoes using tint() and shade() Sass functions to create light and dark versions of their hues. The outcome is a color palette that feels more authentic to end users.
Foundation on the other hand has done very little to improve their color palette. It remains, ahem… basic.