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?

6 responses

  1. A nice article. I have no or zero knowledge of BS. But if BS sucks, what are the possible alternatives?

    1. Thank you very much for the comment. I used to love bootstrap but since they were late to adopt latest CSS features and late to drop jQuery I moved away from them.

      I personally use https://tailwindcss.com/ for all my projects. There is a small learning curve but once used to it there are endless styling options. Plus they adopt new CSS features really quickly.

    2. Tailwind + Flowbite

  2. Had so much work to rewrite my custom components from BS3 (from LESS to SCSS templating) to BS4 and now to BS5, a little change there, a little change there and you have to spend entire day on every *bs change they made. Your .btn-block is a perfect example. What I hate most is the padding/margin utility classes names, of course they had to change it, so ppl who wrote BS for years has read the documentation for every single BS major release again and again.

    1. Yup couldn’t agreed with you more

  3. MattCol Avatar
    MattCol

    Version 5 s*cks greatly. I have several Bootstrap 4 sites to maintain and to my amazement, they are completely messed up after updating to Bootstrap 5, classes have changed names without ny reason (!?). And I was forced to use it because Vue 3 doesn’t work with JQuery so no Modals that worked with Bootstrap 4. Complete mess, I think today’s creators ruin things more than they bring new useful features. They never heard of ‘If ain’t t broken don’t fix it’. Time to find a new CSS framework

Leave a Reply to buddhika Cancel reply

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