Why we stopped using Bootstrap

So I remember around early 2012 when I first discovered Bootstrap. This was a time when I was primarily doing backend work and I didn’t know much about the frontend. Writing anything with CSS was a nightmare for me at the time. Even the most basic things like aligning two items next to each other. I couldn’t wrap my brains around stuff like floats.

One day I was reading up some articles when I found one about this shiny new library created by some guys at Twitter. When I checked the project web site, I was blown away. It had EVERYTHING i needed for my projects! I could get it running in 2 minutes and stop wasting time trying to position my elements because Bootstrap did everything for me and had all the components I would ever want to use in a project. My productivity increased by 500%.

Fast forward a couple of years and Bootstrap became very popular. It was for a long time one of the main things in our boilerplate for new projects here at Borealis – every project started with Bootstrap. And it wasn’t just us – everybody was using it and it keeps growing. According to the site builtwith.com In 2013 between 1.6 and 2.8% of all web sites we’re built with Bootstrap. In 2015 that number tripled to between 8.1 and 9.4%. Today in 2017 it’s between 13 and 19.6%.  There are almost 13 000 000 web sites using Bootstrap today. The framework is now at version 4 and it shows no signs of slowing down.

The good times

Bootstrap was very good to us over the years. We became more efficient and put our projects out faster. The framework also thought us how to be better developers. I know a lot of people out there say that there are bad practices in the core of Bootstrap – the naming is not always semantic, and you can end up with a DOM crammed full of classes. But it does handle modularity very well and I personally grew as a frontend developer through it. By analyzing the internals of Bootstrap I picked up the good stuff it does and started to apply it to my own code. Because of this, with time I have learned to write extremely re-usable CSS code that is easy to maintain.

So it’s turbo popular, it’s growing, everybody is using it. We consider ourselves a trendy agency that uses all the latest tech and we decide to ditch it? Makes no sense, Right? Wrong.

The bad times

What bugged me with Bootstrap is it’s heaviness and how I started using less of it’s features over the years. When I was starting out as a web developer like many others I didn’t regard performance. I thought – well its the year 20-something, Internet connections are pretty fast, what difference does 100kb here or there make? Oh how wrong was I! Over the years I learned every kilobyte counts and today I’m obsessed with making everything as lean as possible.

The CSS+JS for Bootstrap 4 when minified total at around 200 Kb. That’s not small at all. To make it worse as the web changed, as my projects changed, and as my workflow changed I started using less and less features from Bootstrap. I was either writing the same feature myself because it was lacking in some way or I was using a better library (for instance Boostrap’s carousels suck pretty badly compared to the awesome Owl Carousel). So I found myself including the heavy Boostrap codebase into every project and then just using the grid and a few features. Yeah, yeah, I know I can customize Boostrap and build it with only the features I need, but still.

This was problem #1 for me. Problem #2 was with time I started using Angular.js in my projects. And angular and Boostrap don’t play together very well. There are 2 projects trying to fix this (Angular UI and Ng-Bootstrap), but both have their own problems. So when I was using Angular and Boostrap on the same project I was struggling a lot with any of the js components from Bootstrap and had to either ditch them or work my way around them.

I realised Bootstrap just doesn’t work for me anymore. I experimented with a couple of different libraries. For a period of time I was pretty hyped on Angular-Material. If you don’t know about it, it’s a framework implementing Google Material design controls with native Angular support. It had some pretty interesting stuff like a Flexbox first layout and a really powerful dynamic grid written with angular directives. But I learned it was only good on projects implementing Material design (Duh!) and it was too reliant on javascript for layouts which didn’t make it a good enough fit for public web sites.

The break-up

Finally I decided to ditch frontend frameworks like Bootstrap all together. This decision slowly moved to other developers in the company. We no longer use it in any of our projects. I simply have my own small boilerplate code for grids. For anything else I keep it lean and if it’s simple I write it myself or re-use something I already made (I do this for modal windows for instance). In other cases I use a good, lean open source library.

I’ve been writing code like this for more than a year and a half now and I haven’t looked back. Our codebases are leaner, faster and easier to maintain then ever. And don’t get me wrong I’m not hating on Bootstrap. It’s still a great framework and it’s popular for a reason. I think it still has a lot of great uses. I would probably use it for rapid prototyping. Also if you’re not proficient enough with CSS then Bootstrap can make your life much easier.

So I’m not telling you you should ditch Bootstrap just because I did it, I’m just giving you some perspective and reasoning behind why it worked for me and hopefully it gave some food for thought and will help you out in making your own workflows better.

Hit us up in the comments and let us know if you’re using Bootstrap and what you think about it.