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

Top comments (52)

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

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
 
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
 
ozzy432836 profile image
Oz • Edited

My thoughts exactly. When you have been in the software game long enough, you see that there's a new framework every month.

If there's a demand for something then learn it. E.g. React not jQuery anymore.

Someone told me about tailwind and I saw all the classnames and was like "thats bootstrap"

I'm in a real "I may as well just stick with Bootstrap" mindset.

Collapse
 
codereaper08 profile image
Vishwa.R

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
 
codereaper08 profile image
Vishwa.R • 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 ✌️

Collapse
 
heryyustana profile image
Negeri Lucu-lucuan ⚡

Spectre ftw for small projects

Collapse
 
gdenn profile image
Dennis Groß (he/him)

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ß (he/him)

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.

Thread Thread
 
ozzy432836 profile image
Oz • Edited

you mean like
<Row>
<Col><Col>
</Row>

If so then I know what you mean
I would rather actually write normal html divs with classes (even if using bootstrap) because I can easily swap a classname of col-1 for columns-1 if moving to tailwind in future rather than have to replace every instance of <Row>

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

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

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
 
ivan_jrmc profile image
Ivan Jeremic

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

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
codereaper08 profile image
Vishwa.R

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
 
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
 
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

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

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

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

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

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

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.