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?
Oldest comments (146)
A lot of projects I end up working with use Bootstrap in some form, just because it comes with a lot of WordPress themes. Personally though, I really like Tailwind.
It always depends what you want to do. I agree that for a simple web-page there's no need for bootstrap. But there's life after, for those who don't get stuck in developing basic stuff. E.g. we're developing enterprise apps for airlines - revenue management, pricing, inventory management, etc. Your're not going to do that with a simple table but require some solid templates and components. And that's what bootstrap is for.
A contract value of those prices does not normally come with its own customized templates? It seems weird they would shell out that kind of money and immediately accept that performance hit.
I checked out a couple air line home pages to see:
AA: Modernize/jQuery
Delta: Just Bootstrap.js
United: React (without css framework that I could find)
In my experience, big contracts and companies often require documented and standardized solutions so the project can be maintained, improved, and fixed easily at any point in its lifetime. No one knows how long a software project will be around, and they know you won't be around forever (they don't want you to, as that would mean spending more money). There is of course a considerable amount of customized work to be done, but using public or private/paid solutions that are easily available and that anyone can pick up is a common practice.
Is it possible to use bootstrap to develop Project management application?
I donโt see how not?
I've built dashboards with bootstrap framework. Overall - it's just a framework. It'll help you lay out your components, and using the utility classes are helpful for a lot of the visual elements in common Project Management software.
If the bottleneck was CSS file size (which it rarely is on the projects I've built), It would be difficult to refactor the project out of bootstrap because of how dependent a lot of the code is on bootstrap. But that's not a con -- it was a fast deployment VS many many more work hours to find all the right visual libraries to display data.
So basically you are saying you're can't create a good design with bootstrap?
Sorry, but that's just...well, dumb.
I'm not saying you can't do good designs with Bootstrap (You totally can lol), what I'm trying to imply is the fact that if you are going to use Bootstrap and the design will force you to overwrite most of the styles of Bootstrap, you shouldn't use it.
Read the third part (Styling) to know what I mean better ๐
That's great! I've been doing my own CSS stuff for I dont know how long and the one thing I've seen the most when people find bootstrap/materialize is that they never learn to understand HOW it actually works. Getting some basic knowledge about CSS will help you in the long run!
Hello Codedgar;
I've been using lightweight CSS frameworks because I needed the column system they had, discovering Flexbox Grid framework in this article was fantastic!
In the other hand I agree with you... Mostly. Actually I do hate Bootstrap! And it makes me so sad and angry that everyone is teaching Bootstrap to junior programmers as if it was the only way. The only thing I disagree with is that Bootstrap it's "good for fast prototyping".
There are many more frameworks out there designed to prototype easy and faster, such as Bulma CSS, Materialize and even Tailwind (this last one is about utilities but it's escalating so good).
I think those using Bootstrap nowadays probably don't want to try other frameworks or either they can't switch because their projects were built with it from scratch.
Really nice article!
Yeah I've looked at bulma. I'm planning to use it in my personal projects. Seems easier to use than Boostrap.
It is, absolutely๐, and now it has lots of plugins that include javascript!
Whena coder criticize Bootstrap to suggest Materialize, I stop to read ๐
Both are frameworks with opinionated designs.
Sorry Silvan, but that makes no sense.
First of all I'm not a coder, I'm a fullstack so I also do design, and when I'm forced to use the guides of Google Material to design a product then of course I'll be also forced to use Materialize, and actually its easier than bootstrap.
In another hand, I've suggested 2 more frameworks really easy and fast to use and prototype which are very extended and useful.
fIrST oF iM NOt a cODeR, iM a fULLsTaCK
...Excuse me?
A fullstack is a coder that programs frontend and backend, hence the term. For you to say you're not a coder means you're ignorant of what a fullstack developer does, yet you say it's your profession. Hence, we mock.
I think that's a little obtuse, @satougg4
To some "coder" carries a tone of derision, or it's seen as reductive- Since it only conveys a small facet of what a developer does.
Personally, I often see it used/misused by people who overestimate their depth of expertise, so for me, it's a red flag.
It's obtuse to assume that because someone wants to clarify that their expertise is not just that "they write code", (but instead they work across a variety of architectures and design and implement systems) means they don't know that their job involves writing code
Read the guys article and figure out for yourself whether he knows what his job involves
Don't use Flexbox Grid framework. It is quick but dirty solution. Let me explain: Years ago people used html table element for page layout but for big projects you should have a separation of content and presentation. That means that for layout people should use CSS but for content HTML. So in your HTML you should have classes like content, article, form, legend, navigation, input, about, menu etc...but in CSS you should have a designer set the layout of those elements/classes by choosigin grid, flex, float or whatever it needs.
But with Flexbox Grid framework you are designing classes to have a predefined layout in HTML, instead of just having class="content" and let that content layout be defined in CSS. I get it, it is quick and convinient but it is wrong in a long run. When you want to change a layout you would need to changee html instead of just changing CSS file. It is not a good practice so we moved away from that a long time ago.
I think these frameworks add a layer of abstraction and encapsulate the inner workings which will be imperative if the developer would know what goes on under the hood. To have better understanding and control over their workflow rather than been opinionated about it. I agree to the fact that bootstrap and other frameworks are sometimes unnecessary especially for smaller apps, no need for unnecessary dependencies. But I also totally agree that when you need to get the job done faster you can go ahead and use it. But in addition to that you can create your own custom components and work with it when you want. But I think its more of a personal decision though, but as for me the projects I do now are intentionally customized and require me to have more control so I do alot of styling from scratch but I use sass preprocessor and the BEM design pattern.
I will have to agree that bootstrap might be unecessary and even unwanted for smaller project but I would argue also for big or very customized layouts or designs.
A rule of thumb could be that if you find yourself undoing most of the style structures that bootstrap gives you and you are constantly using !important keyword to get things done I think it is time to start considering your life without bootstap.
I would personally use bootstrap only if the job/client required it or if the project was already based on bootstrap and did not want to make a major overhaul. I would probably use a framework for columns/grid but even that is probably not needed.
I find it that in all cases plain old CSS (actually new CSS3) will give you all power and flexibility to create what you need to create exactly what you want to accomplish.
my 2c
One positive about bootstrap is that if another developer needs to modify your code they can understand bootstrap faster than working on custom components since it's got well established rules and docs
I've also decided that personally I'll use bootstrap by default and become proficient at it, if the client wants a radically different look then I'll charge more for it since it takes more time to do custom and make it polished
I find this way of thinking critical for any developer, regardless if working with Frontend or Backend. You need to weigh your needs with what the library does and how much it carries that you don't need. Sometimes wanting to build something fast, people forget that it will eventually need to be maintained. Which means if you are only using a small portion of a library all the extras it carries can get in the way of maintenance.
Off topic but i snapped the pic used on the cover, totally was surprised to find it in the wild.
Holy hecc! Hahahaha Nice pic man it's amazing
I've never really liked bootstrap from the start. Sure, it's quick to use and all, but overall I've never considered it important or needed either.
In that sense, it's quite annoying, how so many people quickly grab bootstrap, and go on believing they've done the part (frontend).
Very nice article, happy to know am not alone anymore.๐ ๐
Same here. I worked for an agency once that was fired because they didn't use bootstrap! The client claimed the site couldn't be responsive without it even though we had build client adaptive mobile styling into the custom front end before this conversation even happened.
The problem with frameworks in the industry is that it's driven by marketing either to get the name of an existing tech company into the OSS space or with the hope that a buyout will happen. This leads to the wrong decisions happening when the people choose the tech stack based on hype -- not experience and requirements.
I've had to fight bootstrap layout styles on too many projects in the past 5 years to recommend it to anyone. It was built on naive best-practices from 10 years ago that lead to overly specific selectors and often require !important overrides. If I were releasing bootstrap today, I'd call it '!important'.
Then use sass, and bring in only features/components that you need such as the grid??
And have negative margins? No thanks. Bourbon and neat were better tools for this, but these days I just write it by hand. Flex box and css grid are supported well enough to not need this anymore anyway. I've used bootstrap mixins from sass for media queries in the past, but was unhappy with the lack of flexibility. Building at responsive (instead of adaptive), every design calls for breakpoints at different queries. As widely used as bootstrap is, css is used by nearly all websites and if developers can't support it that's on them ;)
Again, everything is customizable. Even the breakpoints. Itโs just a matter of overriding the variables.
Sounds like you've been loading the full compiled CSS file and then overwriting the styles?
Why don't you use it with sass? It has a huge list of variables you can override to change the output and you can easily remove the parts you don't want to use.
If you use it like that then you hardly have to write any CSS at all and get consistent styling when you decide you want to use another part of it later.
From what I know you can not use Sass on a pure HTML project :o
I'm not sure what you mean?
SASS is a pre-processor designed to make css easier to write and manage. It compiles sass files to css.
That's why Bootstrap uses it, you can change everything by overriding the variables.
Please do research on what youโre writing about before misleading a ton of people... If you go to the official bootstrap documentation, youโll see that it has an โextending bootstrapโ section. You can use sass to only bring in features/components that you need. With this, you can also override variables, so you donโt have to use โimportant!โ. You also donโt have to use jquery, only if you want to use the JavaScript features such as modals or dropdowns.
My opinions come from 4 years doing websites! And while I agree on the sass part, you need to use jQuery and Bootstrap.js if you want to use the navbar or pretty much anything you want to have a functionality implemented in Bootstrap, so not having it would cut a lot of components out
You can choose to not import those components (which by the way, aren't that many) or just don't use them when you haven't added jQuery and bootstrap.js. You can also choose to add custom JavaScript (or use another library) and just use that.
Navbar also works perfectly fine without, you just can't use features such as dropdown for hamburger/profile menu, etc.
4 years is a long time without having looked at SASS, which is taken for granted that you know of if you do front end web development.
Script kiddie go back to your lessons
Bootstrap is best used as a framework from which you derive styles. It has a ton of utility features, but something that is big for me is that it is one of the few frameworks that has full-featured accessibility. I just don't have enough expertise to do all the work to make accessible styles on my own. It's easy to focus on the visual aspect of the design while forgetting accessibility. Bootstrap has some guard rails up to remind us.
So I usually end up customizing bootstrap by using the bootstrap SCSS library and preprocessing that with sassc. You can get it down to a few kb by excluding unused styles or by creating your own scss stylesheet.
And these are preprocessing steps that you do on your workstation while you're creating the design, so it works just fine with static HTML.
I'm totally gonna test Sass! Can you link a beginner tutorial so I can check it out?
First you'll want to install it. There are various implementations. I prefer the one written in C but only because it's the easiest for my environment. Then this guide will walk you through most of what you need to know.
The way I learned how to use SCSS was to reference that guide and then look at Bootstrap's variables and observe how they affected included styles in bootstrap.scss. You'll notice in bootstrap.scss you can comment out the imports you don't need.
There's an extension for visual studio code called Live SASS compiler that does the trick and it's awfully simple to install.
As for a tutorial, the official site has great documentation and it's, I believe, the best place to start.
You gotta be kidding, so youโve never seen sass prior to writing this article?
I knew what it was, but I haven't used it since most of my work is pure HTML, CSS and JS without anything like NodeJS, React or VueJS so I haven't catch up with CSS preprocessors ๐คท๐ปโโ๏ธ
Iโd kindly suggest you to start using it, it is certainly a one way road.
Donโt think of it as something related to node frameworks. If you build front end, it is simply your right hand for writing, organizing and maintaining your CSS at the same time you speed up the development . You can even reuse your own partial definitions within your CSS project as many times as you want, make global variables.... etc. Also you will be able to split your files into components or pages (your choice) without using the CSS @import statement that, as you sure know, triggers new requests to the server, something that is not a very good practice from a page load optimization point of view. The fewer requests, the better.
Customizing bootstrap is something youโll learn later, but building everything on pure CSS is not efficient for you, and youโll end up crazy trying to maintain big projects.
Hope it helps :)
Thanks for the kind answer, I really appreciate it!
I will totally check it out and see how much I can improve my work with it, thanks again! ๐
I totally agree.
With my personal experience, i always try to customize bootstrap as much as possible, for example: I use my own bootstrap.scss file, exclude all unnecessary components, and customize variable.scss to match with the design.
In doing so, i hardly need to use !important, which is the most should-avoid thing imo.
Well I agree with you but what about CDN resources they are always in the Cache of many users that previously visited other website with the same version of bootstrap.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.