Member-only story
3 Reasons to Abandon Bootstrap in 2021
It’s been 10 years, let’s move on
Almost exactly 10 years ago Bootstrap was released. Not long after that, it was regularly listed on developers’ CVs amongst the list of technical skills. I was working as a full-stack developer at the time and most of my projects followed similar requirements: Low budget and high ambitions.
Bootstrap seemed to cater exactly to those needs. It allowed developers with little frontend knowledge to put together great-looking websites in no time. With a little bit of effort, they even worked on mobile. It worked, it sold — at least in the eyes of the clients and probably most website users.
And, ten years on, it still does.
According to Wappalyser, there are nearly 3.5 million websites out there that still rely on Bootstrap. The site reports that even the big boys like paypal.com, etsy.com, and gitlab.com use it.
There’s nothing wrong with it, in many cases. But just like the emerging trend of quick website builders like Wix or Squarespace, Bootstrap was intended to help create websites quickly and with little to no frontend knowledge required. The focus was never on creating accessible content or maintainable code. As a result, it was easy to fall into the trap of creating bloated, inaccessible websites that make developers run for the hills should they ever have to change something in the layout.
1. The Grid System
The most popular and still most easily recognisable feature of bootstrap is probably the grid system. It’s relatively straightforward to use: look at a design, divide it into columns, and assign column classes to your divs. For mobile-friendly layouts, you can add additional breakpoint classes. You can even make the columns swap on mobile.
To make this all work bootstrap uses a variety of breakpoints for various screen-sizes. Although these breakpoints can be adjusted, the default ones are pixel-based values.
The problem with pixel-based breakpoints is that they aren’t working well for accessibility. Breakpoints units should really be based on your font size and that font size should be a relative unit e.g. either EM or REM.
