I used to love Bootstrap. God, now I just hate it

I have been using Bootstrap since it was version 2. At the time Bootstrap was an easy way to set up a responsive website. And also it made your life so much easier and developing a decent website became easier thanks to the styled elements they provided.

At the time Twitter and several other popular startups used Bootstrap. In the beginning it was called Twitter Bootstrap because it was in fact build to be used on Twitter.

Then Bootstrap migrated to version 3, and I always wanted a Bootstrap that didn’t require jQuery. jQuery was getting outdated, and it was easier to use vanilla JS or something like Vue that gave more functionality and templating over jQuery.

Looking for al alternative

So I decided to search for an alternative framework. Back then some of the popular CSS frameworks were Foundation, SemanticUI. I always found Foundation to be a very difficult framework to incorporate to a website, and looking back today I see that the project has been abandoned. SemanticUI was also great thanks to it’s semantic classes which was easier to understand. But that too was abandoned by the creator.

I came across Bulma which was a small CSS framework that didn’t include any javascript and and had very little footprint. I loved using Bulma and used in several of my projects.

Even though Tailwind was there at the time, the setup process for Tailwind was too complex, and I always tried to stay away from it.

Then when Tailwind version 2 came out, I decided to use it for a simple project that I was about to put online. Tailwind css has a utility class approach, where instead of providing out of the box elements like Bootstrap, Tailwind gave you utility classes which you can combine to create any number of elements and designs without writing any extra CSS code which was great.

I think I instantly fell in love with Tailwind and after getting used to it I used it on several other projects and continue to use Tailwind as my goto css framework whenever I wanted to get something off the ground.

Bootstrap hell

Recently I started working on an open source HIMS (health information management system) project as a developer (which I will write in future posts), and one thing I immediately noticed after setting up the project on my local computer is the fact that it requires UI improvement.

The project is based on another HIMS project and has several CSS frameworks, and custom styles which were incorporated along the way.

The project already had an older version of Bootstrap and depended on Bootstrap for some elements. I wanted to remove all styling frameworks, in built styles and streamline the CSS for maintainability and improve the UI. Migrating to something like Tailwind was too difficult because of the size of the project and required rapid development.

Since the currently release of Bootstrap is version 5, I decided to migrate the project to Bootstrap 5. I have never went through Bootstrap documentation since version 3 and after reading the documentation I realized lot has changed over the years.

Now Bootstrap is not a framework which gave everything from elements to components out of the box. Neither it was a utility based framework like Tailwind, but a mixture of both, which was very confusing and hard to implement.

For example, as I remember back in version 3-4 there was the btn-block which made the button go full width.

<button type="button" class="btn btn-primary btn-block">Sign In</button>

However, if you are making a button full width in Bootstrap 5,

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

According to Bootstrap’s own documentation,

Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors.

https://getbootstrap.com/docs/5.1/components/buttons/

As I remember Bootstrap had a .buttons class which nicely added paddings and spacing to buttons inside that element.

One aspect developers complain about Tailwind over Bootstrap is people don’t enjoy writing so many utility classes. But when you write everything in utility classes everything is in utility classes, and you will also get used to write everything in utility classes after several days.

But now with Bootstrap it has become a mixture of utility classes and components that makes things way more complicated than they need to be. The above button example just one use case, you will find several such complicated use cases in their documentation.

However, I will be able to migrate the project successfully to Bootstrap 5, however, I won’t consider using Bootstrap for a new project starting from the beginning.

On a side note, Bootstrap dragged jQuery with it until version 4 and fully dropped jQuery starting from version 5 which was released in 2021. And I still feel Bootstrap lags behind some of the modern frameworks like Tailwind.

What is your opinion about Bootstrap 5?