For many web developers, Bootstrap is the way to go when you have to create a Website or App. But in the five years I have making websites, I have found things that made me change my decision of using Bootstrap at all, and I've changed the way I create websites almost completely.
Hi! My name is Codedgar and today I wanted to talk of why I don't use Bootstrap anymore. Since it's a question that students, coworkers, and people, in general, have been asking me a lot recently: Why I don't use Bootstrap?
Let's start with my history (I'm gonna be short, promise C: ) When I started working on frontend web development, the first thing I crossed upon was Bootstrap. And with that, I thought I had frontend developing mastered, it was easy, fast to use and it has a lot of components! Nice!
But as my work progressed and the websites became more and more custom, I started to find Bootstrap a little bit unuseful, and that's when I came to a conclusion as to why I would not be using Bootstrap in my new works.
For easier understanding, I have divided this post in the reasons of why I don't use it, enjoy:
1- Weight
2- Components and Utilities
3- Styling
1- Weight:
"Weight? But Bootstrap is less than 500KB". Yes, I'm aware of that. But let's take on consideration how much of Bootstrap we actually use. And using Bootstrap means that you have to use also jQuery, so if you were to create a landing page with Bootstrap, you would have to use jQuery, Bootstrap CSS, and Bootstrap JS. All of these resources will not be used even in half if you use Bootstrap. And that brings me to my next problem.
2- Components:
"Lack of?" Nope, not at all, is actually the opposite. Bootstrap has so many components and utilities, that you are almost certain to never use even half of them. And you may argue that with NodeJS you can compile and use only the CSS that the website uses, but with plain HTML for a server with Cpanel, this is not possible (At least that I know). So there's this vast quantity of components that you will maybe not use and they will be there anyway.
This is not a problem just of Bootstrap, but of many frameworks I've seen, like Materialize or UiKit, where there are components that most people wouldn't use and there are classes that can be broken down into only one style, like:
.modal-top-left{top:5%;left:5%}
And so on for modal-top-right, modal-bottom-left, modal-bottom-right. If you wanted to change the position of the modal you could totally do it with only one class, adding these classes is just dumb.
3- Styling:
While Bootstrap is easy to use, it's not so easy to customize as you might think. Some components will require you to use !important several times, which is not ideal when creating CSS. And having to override the default styles of Bootstrap is just like having to create your own CSS from start.
What do I use then?
Most people at this point just say " So what? You make CSS from start and don't use any framework?" And well, I don't create my CSS from scratch, and I do use a framework, but only for managing the columns of the website. The framework I use is called Flexbox Grid and it justs comes with columns and rows, nothing more. And it only weights 1.9KB! So, on a website with 1 homepage and 4 subpages, the total CSS (including Flexbox Grid) is only 5KB. For me, that's amazingly fast!
And should I use Bootstrap?
Well, there's something I can't deny and it's that if you need to develop something incredibly fast you can use Bootstrap. And if you are thinking if you should, or should not use Bootstrap, ask yourself:
1- Will I use several components of Bootstrap?
2- Am I in a rush to develop this frontend?
3- Is the design important for this?
If your answers are: Yes, yes, and no; Go ahead and use Bootstrap without shame.
Extra: Do I hate Bootstrap?
Of course not. I think that is amazing to develop websites quicker and easier, but I just would not be using it anymore because I prefer to make my own components and craft almost everything by hand. I know that Bootstrap will live along a still be used by a lot of people, and that's totally fine :)
What do you think? Do you use Bootstrap?
Latest comments (146)
You can pretty easily customize Bootstrap and import only what you need to use. I think it's gotten even better with version 5. I would recommend people reconsider it. It's also got TONS of utility classes, which I find helpful.
Hi, I'm from the future, come here to recommend you a nice, fast and customizable CSS Framework called Tailwind CSS
A lot of things have changed now with Bootstrap 5 and my philosophy is: use only what you need. I do that with SASS directly, so Bootstrap always comes handy when I need to work fast. I know how to to it without Bootstrap, but why waste my time over and over again?
Hi codedgar
Bootstrap is a useful ui framework work but as you mention, bootstrap has so many components and utilites that when we install it we do not even use half of them and they will be there anyway
for building a simple web page or website it is not necessary to use it or when you want to build your own component or costume styling
But in my opinion bootstrap is a great framework for building large-scale applications and many famous app use bootstrap like udemy, and Spotify and Twitter
frameworks kill design
Good read. Thank you. I just finish HTML and CSS about to embark on JS. But I heard a lot of bootstrap could open me more into CSS framework. I tend to agree with you, now i'm on bootstrap track, that If we need fast and rust front-end, bootstrap is the best approach. However, crafting by my hands would be event prouder! Thanks you looking for your next article about CSS grid. I think I like grid then flexbox.
Lovely Indeed the article is. I have been developing world class apps and software and would like to say If you are a Beginner / Non UX familiar / Front Desk Operator then bootstrap is for you.
If you know the Pixels and the Density and the Mobile / Desktop / Web works then write your own framework. Never depend on frameworks they close down in time. Write the Native language. So write your own framework, it could be done in few lines for world class products.
As a coding newbie, we were required to build a project as a graduation requirement for the Bootcamp that I attended. The mentor(s) suggested using Bootstrap. I liked it but we were also required to complete a course in Treehouse. I enjoyed the Treehouse course because it also required that I learn about Flexbox Grid. :-)
Leaving aside the purpose of the article, I'll disagree with you on item 3. Since BS 4.x and the adoption of SASS pre-processor the theming and customization issues turns it far more easy to deal with. The use of the !default flag for ALL available variables made it pretty easy to config for everyone needs. They still use jQuery for all the behaviors indeed but I think it's a matter of time to get rid of it.
If i had to make something I'd never use bootstrap as the default styles imo are pretty ugly considering today's trends.
I also dislike flexbox grid for some of the same reasons I dislike flexbox. e.g. +100 divs and something you could easily write yourself and probably be more precise (assuming you know what you're doing)
tho flexbox grid is definetly the best of all the css frameworks I've seen.
Also, as far as compiling styles like you mentioned with nodejs. Very simply with react or similar tooling which compile things down to a static website, bootstrap would get the treatment you were talking about where unused styles aren't used in the compilation (iirc) however with react this thing exists react-bootstrap.github.io however thats a solution to a problem that didn't exist as I'm pretty sure most react devs would prefer to make their css with something like sass, less or css components.
Iām a backend developer but the reasons exposed in this article makes sense to me.
Thanks for sharing your ideas.
I think your example is too simple, Bootstrap is used for bigger projects.
Btw personally prefer a framework that has many features but able to treeshake it easily (for enterprise applications)
From past experience, I found that most implementations of Bootstrap were very poor. Either, including the entire framework or abusing the framework with a skip full of overrides, additional (and in some cases multiple) themes, etc.
With Bootstrap Vue now readily available, the reliance on jQuery is absolute tosh.
The moral of the story here is to use the right tool for the job and use it correctly. Remember the saying "You don't use a sledgehammer to crack a walnut".
Admittedly, that's easier said than done.
I also stopped using Bootstrap recently. It worked, but I also found that for the setup involved (personal projects, portfolio sites, etc) I wasn't using much of it.
I started using Bulma which feel much lighter and easier to use.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.