DEV Community

Cover image for Is it time to let go of Bootstrap?
Vishwa.R
Vishwa.R

Posted on

Is it time to let go of Bootstrap?

Hello again!, After a short break, I am back again with a non-technical post. As Web-Dev's, we use and search all possible ways, to get our job done in the easy way. The most vital visual part of Web-Dev, the FRONT-END, is very important to catch the eyes and to give a nice user-friendly experience for the user. To make this job easy, we use CSS frameworks like Bootstrap. So, after these many good years with many technical competitors, is Bootstrap still good to hang on with?
Let's see about this in today's blog.

So, we'll start with

What is Bootstrap?

Bootstrap is a CSS framework (Most popular), which uses class based Web-design. The official site of Bootstrap describes itself as,

“Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.”

And that's completely true, Bootstrap is fast and provide responsive mobile-first build classes to achieve what we Web-Dev's dream of as “RESPONSIVE DESIGN”. It provides an awesome grid system(Which I love) and JavaScript plugins(I hate them using jQuery, we'll get into it).

Competitors

CSS frameworks

Image source: www.tekkiwebsolutions.com

Bootstrap now faces a reasonable competition from similar UI kit based CSS frameworks like Foundation and Bulma. Apart from these, It also faces a severe blow from TailwindCSS. Bootstrap is always criticized for its inflexibility. I would say, it's not inflexibility, but the huge amount of time taken for customizing the defaults provided by Bootstrap(It provides default UI components, because it's a UI Kit based CSS framework). Whereas in frameworks like TailwindCSS, Utility classes, which provide low-level flexibility, are provided.

Should Bootstrap worry about competition?

I would say Bootstrap was not made to work like TailwindCSS. Bootstrap was made to provide developers of all levels, from beginners to advanced, the ability to quickly spin up a nice looking UI without worrying about responsiveness. Bootstrap's users are mostly beginners, who start their journey of using class based CSS utilities from pure CSS. It also has a good learning curve, so people get it better soon, as frameworks like TailwindCSS, Foundation and Bulma comparatively has a steeper learning curve.

Should we use Bootstrap still in 2021?

Of course, It is best in class for rapid web-deign, where you want a useful and nice looking site, without any brand colour pallets or pixel specific needs. Even today, more than 19% of websites use Bootstrap as their CSS framework. I would say, it's the most probable gateway for learners, who get into class based CSS frameworks from pure CSS and HTML. If you want a quick site for a Boot camp you arrange next week, go for Bootstrap, It's faster to build, gives responsiveness.

Bootstrap is gearing back again!

Bootstrap 5

Image source: getbootstrap.com

As you all know, Bootstrap 5 came with a nice update from 4. It let go of jQuery and switched to Vanilla JavaScript. So, now how good is that!
Bootstrap also managed to bring back the Bootstrap icon support.
It also came up with some low level utility classes for added flexibility. Overall, Bootstrap is not going to be dead, but getting back on track.

Thanks for Reading and following me!
If you didn't, make sure to follow me, so we can learn and discuss tech-stuff.

Attributions:

cover-image : www.drupal.org

Discussion (56)

Collapse
lukeshiru profile image
LUKESHIRU • Edited

TBH I used Bootstrap 8 years ago, but since then I never had projects (of my own or for work) using Bootstrap. The only other time I had contact with it was in a project of a friend of mine (for a freelance thing he got), that had an old PHP+MySQL app with a Bootstrap UI. It makes sense if you're already working with Bootstrap to migrate from older versions to the newer ones, but starting from scratch, we have way better tools (at least from my PoV), some of them you mentioned like Tailwind (they recently added an amazing JIT mode), Material and even Bulma. And if you only want to "prototype something", you can just use "no-class" stuff like Water.css, MVP.css, awsm.css, Markdown CSS and so on.

Cheers!

Collapse
codereaper08 profile image
Vishwa.R Author • Edited

I agree with you @lukeshiru :-)

There are better alternatives out there, like Tailwind and Material. The purpose of Bootstrap today in 2021 is drastically reduced, but we must admit that, it still acts as a entry point for many people ,AFAIK Even I started my journey with Bootstrap and then started learning Tailwind, which hepled in my case.

I also use a "no-class" CSS framework called "SpectreCSS" :-)

Happy that you've responded!

Collapse
hyggedev profile image
Chris Hansen

Tailwind is 🔥But I gotta say 😅 It does take quite the set up, and after using it in a handful of projects, the docs is still my right hand man lol. I can't do a thing without it!

But then again, I don't remember how long it took me to get bootstrap down 🤣

Also, I have a soft spot for Bootstrap lol. First css framework!

Solid points great article ✌️

Thread Thread
lukeshiru profile image
LUKESHIRU

If you work with VSCode, there is an amazing extension for Tailwind to get autocompelte, it saves me some time, maybe it works for you as well: Tailwind CSS IntelliSense.

Collapse
lukeshiru profile image
LUKESHIRU

Worth mentioning that Spectre isn't a "no-class" framework. To be a no-class framework, you should for example get styled buttons by just writing <button/>, not <button class="btn"/>. Spectre is good, the thing is it's closer to Bootstrap than Water.css.

Thread Thread
codereaper08 profile image
Vishwa.R Author

HAHA thanks for pointing out, my bad, I said it in a flow.
Should be careful next-time 😅

Collapse
heryyustana profile image
Negeri Lucu-lucuan ⚡

Spectre ftw for small projects

Collapse
amans199 profile image
Ahmed Mansour

i have a mini-sass-library of my own that I use it after config to generate many styles needed for every project ..
so it allowed me somehow, to abandon most of the bootstrap's utility classes ...
BUT, bootstrap has some extended versions for most js frameworks that still take the heavy lifting ...
Example : bootstrap-vue.org/

Collapse
miketalbot profile image
Mike Talbot

Woo JIT mode is cool...

Collapse
tfantina profile image
Travis Fantina

Bootstrap is still my goto because I know it fairly well. I think BS gets a bad rep because it's so easy to use the defaults and put up an unstyled website that looks like every other BS website, but if you spend a bit of time changing the defaults and writing some of your own CSS you can easily get a fully responsive website that is 100% unique.
I know there is a lot of new hotness around Tailwind but at this moment I don't see the point in investing the time to learn something new when BS still works fine for me.


Unrelated side rant:
Bulma is a bit of a nonstarter for me because it's not accessible .

Collapse
codereaper08 profile image
Vishwa.R Author

That's true @tfantina
I too use Bootstrap, even now, for some simpler projects which just focuses on functionality rather than brand-uniqueness. Tailwind is pretty good TBH and fantastic if you spend some time with it, but requires like a indepth knowledge of CSS, whereas Bootstrap gives UI components for ready.

So most of my friends starting out in Web-Dev start from Bootstrap :-)

Collapse
twigman08 profile image
Chad Smith

For the longest time I spent way too much time using what seemed to be the trends, and the latest and greatest out there. I spent too much time preaching that Bootstrap should not be used because I’ve seen so many people say it shouldn’t be used. On and on with every new web development trend or technology.

I’ve learned a couple things - stop doing it. Anyone that says you can’t develop a good application because you use bootstrap, jQuery, or some other framework/tool doesn’t know web development the way they think they do. There is so much more to web development than what we think of, and not every company is like what company you work at.

Where I work, 90% of all our applications we start and finish are done in Bootstrap and jQuery. And most of them are absolutely great applications. Why? Because they can be. It also is because of the clients we get. We develop applications that MUST be turned out very quickly. We can’t afford to create our own design system or our own component library that can be customized, work reliably, and more from scratch.

My point from this is for the new people in the industry who see posts like this and see people say “nope don’t use it anymore.” I say this - use what you and your company can use to succeed. If your company can’t afford to go off and create their own design system, or to use the latest and greatest tech, then don’t do it. It’s not even all about using the right tool for the job. It’s about using the right tool for the job that can also get your project done on time, under budget, and makes your client happy.

Collapse
codereaper08 profile image
Vishwa.R Author

Well said 👏 @twigman08

“Give ordinary people the right tools, and they will design and build the most extraordinary things.”

  • Neil Gershenfeld

I totally agree with you, We can use any framework if it get's your job done with client satisfaction as you said. The motive of writing this post is to convey that Bootstrap is still capable and competent enough in 2021.

I've seen a lot of negativity around Bootstrap in recent days, I admit that there are better frameworks out there, but that doesn't mean Bootstrap is trash and people must stop using it.

Thanks for taking this time to convey something thoughtful!

Collapse
parasparmar profile image
Paras Parmar

I agree and I had my own rant, so taking the liberty have posted it here.

Collapse
ivanjeremic profile image
Ivan Jeremic

Don't use it in 2021 there is no point.

Collapse
codereaper08 profile image
Vishwa.R Author

My stake is **Bootstrap" is not yet dead, and people are still using it. It has some sense to use it when you don't care spending more time customizing it or if your client wants it badly and doesn't care about brand-design. Personally, I've seen clients like this more often.

As @gilbertoalbino pointed out, accessibility part is pretty good in Bootstrap.

Collapse
gilbertoalbino profile image
Gilberto Albino

Dear, what do you have to say about web accessibility in 2021?
Can you suggest a better alternative to Bootstrap?

Collapse
lukeshiru profile image
LUKESHIRU

Bootstrap has little to nothing to do with a11y. I mean yeah, they might have some good color contrast here and there, but anything else (aria, keyboard interaction, etc) depends on how you set up your code and this applies to every single codebase (no matter which CSS framework you use), Bootstrap doesn't add nor subtract from that equation.

Thread Thread
gilbertoalbino profile image
Gilberto Albino

Go to bootstrap's docs and type "accessibility".

Thread Thread
lukeshiru profile image
LUKESHIRU • Edited

I don't need to read Bootstrap's docs about a11y, I can just google about a11y in HTML/CSS. My point is that Bootstrap doesn't have anything to do with a11y. A11y and Boostrap are two different things, you can have Bootsrap without a11y best practices, and you can have a11y best practices without bootstrap.

No matter which CSS framework you use, bootstrap doesn't add nor subtract from that equation.

Thread Thread
ivanjeremic profile image
Ivan Jeremic

Like someone wrote before here "accessibility" is something you can get without bootstrap got to google read and learn.

Thread Thread
gilbertoalbino profile image
Gilberto Albino • Edited

There is an abysm between reading W3C specs and finding out how to use and explain something, and following a framework best practices backed up by a team of specialists from a company like Twitter that know exactly how to do that. But, that's okay, I am making a lot of money with bootstrap, hope you are as well without it. But I am very inclined to believe you are another hater who defends ideas and not facts.

Thread Thread
lukeshiru profile image
LUKESHIRU

🤣 brah!

  1. If you need bootstrap to make things accessible, do you really know about a11y?
  2. The fact remains the same, bootstrap and a11y have nothing to do with each other. You can have boostrap apps without a11y and have a11y apps without bootstrap. Your initial comment keeps being as invalid as the first time you wrote it.
  3. Weird flex to talk about money, but I guess that you wanted to be congratulated, so Gratz for making money using Boostrap, idk what does that have to do with a11y, but gratz. Imagine how much money folks that know how to do stuff with and without bootstrap do 😉
  4. I'm not being a hater, take a look at your comment:

Dear, what do you have to say about web accessibility in 2021?
Can you suggest a better alternative to Bootstrap?

You were the one suggesting that you need Bootstrap to have a11y, which isn't correct. Maybe you read somewhere that other frameworks like Bulma aren't accessible and thought something like "Ha! Check mate! Bootstrap is accessible!!" but the thing is you can have an app with vanilla CSS, or Tailwind, or Material, or no CSS at all, and still have an accessible app. Bootstrap has nothing to do with it.

Maybe we can leave it here? I'm kinda tired of having to explain the same thing 3 times already.

PS: Twitter (the WebApp) had several issues with a11y (color contrast, focusable elements, etc), so that's not a great point either.

Thread Thread
ivanjeremic profile image
Ivan Jeremic

You don't need W3C spec but thanks for letting us know that you are doing well.

Collapse
gdenn profile image
Dennis Groß

Am I the only one who is deeply unsatisfied with the React Bootstrap framework? It just feels like I have to write a lot of boilerplate.

Before React, I used to enjoy Bootstrap. :/

Collapse
parasparmar profile image
Paras Parmar • Edited

No @denniseh you are not the only one. Angular Bootstrap has a lot of this rubbish that tags along like plastic flotsam on a clear blue lake.
Having used Bootstrap for a longish period, I'd say, all these technologies, yours and mine, just complicate what should be a very simple task of incorporating a good CSS framework in their projects

Collapse
gdenn profile image
Dennis Groß

Exactly, I have the feeling it makes it more complicated for me than using CSS in the first place. Especially React Bootstrap forces you to use the Bootstrap React components. Which is odd, because I want to use a CSS framework and not a React framework.

Collapse
doooby profile image
Ondřej Želazko

bootstrap vue is awesome though.. great docs, quite a lot more functionality.

Collapse
codereaper08 profile image
Vishwa.R Author

Yeah that's true :-1

Collapse
abhinav1217 profile image
Abhinav Kulshreshtha

I tried bootstrap many years ago, When I saw 3 nested divs for just centering a div in container, I stopped trying it.

The only reason I know a little bit of bootstrap is because almost all the templates I used to download for a quick freelance project, were built with bootstrap. I can't even stand tailwind. I have used it but it's much easier and faster to just write css with some sass mixins.

But then, I am not really a designer.

Collapse
codereaper08 profile image
Vishwa.R Author

HAHA that's true I too had a brief break from Bootstrap, planned to try Bootstrap5 when it launched. I still use it for simpler projects.

If you are a designer, It's better to be off from Bootstrap or else you have to spend some more dev-time customizing it.

Collapse
parasparmar profile image
Paras Parmar

Hey, @abhinav1217 Try the new Flexbox. My designers tell me its an absolute blast to work with.
Guarantee you won't be that disappointed, this time.

Collapse
hbgl profile image
hbgl

I always thought that Tailwind and Bootstrap were basically the same thing except that Bootstrap ships with some basic components.

In the Tailwind documentation they say:

You can also use Tailwind’s @apply feature to create CSS abstractions around common utility patterns.

<button class="py-2 px-4 font-semibold rounded-lg shadow-md text-white bg-green-500 hover:bg-green-700">
  Click me
</button>

<!-- Extracting classes using @apply -->
<button class="btn btn-green">
  Button
</button>

<style>
  .btn {
    @apply py-2 px-4 font-semibold rounded-lg shadow-md;
  }
  .btn-green {
    @apply text-white bg-green-500 hover:bg-green-700;
  }
</style>

.
tailwindcss.com/docs/utility-first...

It's a duck. Maybe it got a new paintjob, but it's still a duck.

Collapse
fmaida profile image
Francesco Maida • Edited

Subject: " Is it time to let go of Bootstrap? "
Closing Paragraph: " Should we use Bootstrap still in 2021? Of course, It is best in class for rapid web-design [..] If you want a quick site for a Boot camp you arrange next week, go for Bootstrap, It's faster to build, gives responsiveness. "

This is clickbait at its worst.

Collapse
codereaper08 profile image
Vishwa.R Author

Probably not, I've never intended to clickbait.

I tried to answer the question in subject line, with a starter's perspective.

Closing paragraph too, I tried to convey that, Bootstrap is still competent enough in 2021. In the line "Not inflexiblity but the long hours of customization", I meant the same what a user mentioned in the discussions. I kindly suggest you to read the full discussions, ".

Basically the post is formatted as questions and answers. You probably got it in a wrong way I guess.

All the things I mentioned in this post, advocate for the "BOOTSTRAP IS NOT DEAD". The last Bootcamp example, is just for pressing the fact, that Functionality > Design use case.

I am no way perfect, if you find it wrong, I would love your feedback :-)

Thanks for commenting!

Collapse
codereaper08 profile image
Vishwa.R Author

Certainly not my motive!
Sorry if you find it that way :-(

Collapse
megasanjay profile image
Sanjay Soundarajan

Tailwind has been an excellent option for me even if it does require a bit more writing but bootstrap is a great place to start at if you need to. Bootstrap still offers an extensive css system that is easy to work with.
I would also like to suggest the SemanticCSS community fork version. It's alternative that i've been enjoying as well.

Collapse
codereaper08 profile image
Vishwa.R Author

Nice suggestion @megasanjay , I've heard that before, but never tried it personally, this time I make sure to do.

Guess this is what you are pointing to Formantic-UI

Collapse
megasanjay profile image
Sanjay Soundarajan

Yeah. My bad. I meant to say Fomantic-UI. It's a breath of fresh air with regards to the standard bootstrap look. They also have some great additional plugins that help with that UI development. I have to warn that there are times it goes sideways but usually its pretty rare in my experience. Give it a try and see how it works out for you. Cheers mate :)

Thread Thread
codereaper08 profile image
Vishwa.R Author

No issues 😃
Thanks for suggesting, will give it a try soon.

Collapse
nyomansunima profile image
Sunima

after along research for the good choice, finaly i decide to use tailwind. tailwind more flexible and strong enough to beat bootstrap. Tailwind offer more than framework do, there some feature i love like custom theme, minimize, etc. i think the bootstrap must do their best to following the trend, and the flexibility.

how about you @codereaper08

Collapse
codereaper08 profile image
Vishwa.R Author

I agree with you @nyomansunima , Tailwind is awesome, Bootstrap is still good on it's own for the kind of use-case and the people who use, and will become better I hope.

Collapse
parasparmar profile image
Paras Parmar

I agree with @chadsmith71
I and my team have turned out absolutely stunning projects using some of the most dis-repped technologies on the planet today. Bootstrap, jQuery, ASP.NET and I mean WebForms too as well as MVC. I've been doing that with my team's for close on 20 years. Some of these technologies entered later and some earlier.
As an old coot, let me tell you that if anyone says these make the sites/apps look conformist and clones of the ones made by newbies, mean that you haven't customized the design enough or that you have third rate Frontend developers who don't know their Grid and Flex well enough.
jQuery is an awesome tool and combined with knockoutjs, breezejs will blow anything you throw at it out of the arena.
Devs have absolutely no business :

  1. Reselecting selected elements again and again because that is how they do it on SO( which I respect)
  2. Using multiple jQuery versions in the same project. Absolutely incompetence.
  3. Horrible code structures that begin with a multiple selector and then explicitly Using a for I loop to reselect the same elements over and over again. I'd fire them from my company till they can prove to me that they understand, really understand jQuerys concept or polymorphic return objects.

Taking a wholistic view, all these common mistakes that I see devs making are driven by incompetence, haste, ignorance and the lust for those shiny newer toys that donot focus on the simple deliverables. They try to solve a problem that is simply not so.
Bootstrap has power and flexibility to support technology as old as time it self. The venerable and much reviled IE. In addition to others like Firefox, Chrome, Safari, Opera and some 3rd rate Android browsers.

I think the whole attitude thing is more like learning to ride a bicycle with your favourite parent who have taught many of the neighborhood kids on the same bicycle too.
The young teen now feels cocky enough to call out the old parents on their uniform consistent training methods that donot factor in the latest complicated training videos.
All this bottled up rage just means the new dev knows less of the proven, reliable old and speaks more of the unmastered, undigested new and latest fad on the market.

Collapse
supa_cc profile image
CJ LLoyd • Edited

Great article Vishwa.R. I have been developing Angular projects for almost 4 years and have been using bootstrap css since, not really taking in other option so will definitely be checking these out and learning more about them!

Collapse
codereaper08 profile image
Vishwa.R Author

Thanks for the compliment @supa_cc 😄
Make sure to try Tailwind, you'll feel a different vibe ;-)

Collapse
lashac profile image
LashaC

Bootstrap and other CSS are cool. But they are good for prototyping or fast development. I don't like to build professional websites with them.

Collapse
codereaper08 profile image
Vishwa.R Author

Yeah, but we must admit that, We must adhere to what our workplace or clients, need or use as @twigman08 said.

There are many professional websites built with Bootstrap too.

Personal I use Bootstrap as you said for rapid & basic responsive web projects, if the need arise.

Happy you liked the article!

Collapse
lashac profile image
LashaC

CSS frameworks are great helper tool. And great for production websites that doesn't need too much custom stuff.

Collapse
blackjyn profile image
ZVHR El Ekhsaan

I've no longer using Bootstrap since 2016 after doing a project and got nice cash.
It is popular but not so intuitive.

Finally in 2021 Tailwind makes sense, only the setup is bit complicated and it takes different way than any traditional CSS fws out there

Collapse
codereaper08 profile image
Vishwa.R Author

Hands down Tailwind is 🔥

Collapse
akmal4163 profile image
Akmal Mustafa Ayyubi • Edited

Bootstrap is not bad, it's good fast development tools. and it's good for people who worked in backend and not accustomed to native CSS. styling in native CSS has more pain for some developer.

Collapse
codereaper08 profile image
Vishwa.R Author

Yep :-)
That was what I thought to convey.

Collapse
barakplasma profile image
Michael Salaverry

I highly recommend looking at even more minimal CSS libraries which style semantic HTML tags

Collapse
codereaper08 profile image
Vishwa.R Author

Nice suggestion @barakplasma

I've heard about milligram before, but never tried my hand on it.

Will be sure to try these out (•‿•)

Collapse
peter_brown_cc2f497ac1175 profile image
Peter Brown

In my experience Vanilla CSS is generally the best option for professional-grade work. The 'framework of the week' mentality of so many, will cause nothing but misery.

Collapse
carlosxell profile image
Carlos Augusto

Totally!