DEV Community

Cover image for Please don't use Bootstrap!
manu
manu

Posted on • Updated on

Please don't use Bootstrap!

In case you don't know what bootstrap is, bootstrap is a CSS framework.

Here's why you shouldn't use Bootstrap.

All sites look alike!

When you start to see the same layout over, and over, and over again users begin to tune out. You’ve lost me. Your design looks like one of 6,000 other sites out there. And not just the same general layout, but the Exact. Same. Components.

”Let’s be honest: a great many of us are tired of seeing the same old Twitter Bootstrap theme again and again. Black header, giant hero, rounded blue buttons, Helvetica Neue. Yes, you can customize the header to be a different color, maybe re-color some of the buttons, use a different font. Ultimately, however, that doesn’t change anything—it still looks like Bootstrap.

The files are h u g e!

Bootstrap will help you to build an attractive, responsive website, but some mobile users could be turned away by the slow loading time and battery drain issues. Bootstrap comes with a lot of lines of CSS and JS, which is a good thing, but also a bad thing because of the bad internet connection. And there’s also the problem with the server that will take all the heat for using such a heavy framework. Even when bootstrap is minified, it takes a lot of space

Alternatives?

TailwindCSS is much better!

There is no faster framework than Tailwind when it comes to styling HTML. As a result, you can easily create good-looking layouts by styling elements directly. This is possible because Tailwind offers thousands of built-in classes that do not require you to create designs from scratch

Just use plain CSS!

Why use any frameworks in libraries, and just learn the language by itself. You'll even learn (or become better at) a new language

Top comments (65)

Collapse
 
afif profile image
Temani Afif

This is actually funny. I thought I would read "don't use bootstrap, write your own CSS" but I end with worst that "don't use boostrap" --> "use tailwind"

Tailwind offers thousands of built-in classes that do not require you to create designs from scratch

It seems you didn't use Tailwind because you have to create design from scratch since Tailwind only offer a "one property per class". It's basically a listing of the CSS values inside classes. There is no ready design, components in Tailwind if you don't build them

Collapse
 
__manucodes profile image
manu

Exactly! This makes TailwindCSS awesome! TailwindCSS doesn't force any designs, which makes it flexible.

And yes, there are TailwindCSS componens (official) here: headlessui.dev

Collapse
 
afif profile image
Temani Afif

CSS alone doesn't force any designs and is also flexible. Well, this is what CSS is made for. Tailwind is not inventing this and those component are build by people using tailwind. I can do the same with vanilla CSS. Well, it's already done and it's called templates.

Sorry but what you describe was already invented years ago before Tailwind.

Thread Thread
 
__manucodes profile image
manu

Actually, you're right...

Collapse
 
merz profile image
Leo

His bio says he's in 8th grade...

Collapse
 
ronnehag profile image
Fredrik Rönnehag

Also says css is torture. Yet he blogs which css lib/framework to use.

Collapse
 
rildlanster profile image
Rild • Edited

Why such a misleading and vague post is allowed here? Man, seriously, people don't have time to waste.

Collapse
 
devwillis profile image
David Willis

If that was written by an 8th grader then I'm genuinely impressed. He's as educated and articulate as most of the 20-something, even 30-something, tech bloggers out there.

Collapse
 
fjones profile image
FJones

Savage, but oh so true...

 
walterwoshid profile image
WalterWoshid

Experience means almost nothing in the IT industry. Some people just decide to never develop themselves. Just saying

Collapse
 
xgstq profile image
James

What a load of nonsense.

1) You can create your own themes using bootstrap sass globals to override the !default bootstrap variables. Then just add your own unique stuff. Simples.

2) You only have to use what you need, import the scss you need for your project. Sometimes I just use the grid system and nothing else.

You don't need to use popper.js or jQuery either and if you really want to go full on, use purgecss purgecss.com/ on the final compile to remove any unused CSS 😁

Nothing wrong with bootstrap if you read the docs and know what your doing 🙏

Collapse
 
jankapunkt profile image
Jan Küster

Bootstrap + SCSS = 😍

Collapse
 
duhdugg profile image
Doug Elkin

This is just fantastic! I mean, you're definitely wrong on some ponts, but I am loving the enthusiasm. Do vim vs emacs next! 🍿

Collapse
 
christiankozalla profile image
Christian Kozalla

Absolutely, suppose a blogger asks itself: "what topic could I write about that sparks massive controversy and attention in the community?" tailwind vs bootstrap, vim vs emacs, typescript vs javascript... What else?

Collapse
 
willkuerlich profile image
Willkuerlich

Classic tabs vs spaces?

Thread Thread
 
christiankozalla profile image
Christian Kozalla

Or semicolons vs no-semicolons

Collapse
 
madpoetuk profile image
Elliott Rodgers

Still prefer hand coding my HTML and CSS from scratch whether it is a simple static site or WordPress theme. Get quick load times, can be flexible. One of the very few add ons to HTML and CSS I like using is Font Awesome.

If you want to learn CSS the 100% best way to learn is by doing it, experimenting and trying stuff out.

If you want a great learning resource and one of (if not the) best web development blogs/sites on the internet is Chris Coyier's site css-tricks.com/.

Collapse
 
tomaszs2 profile image
Tom Smykowski

Tailwind is Bootstrap competitor. There. I said it. Both produce similar websites. And it is totally fine.

 
pritthakkar profile image
Prit Thakkar

@walterwoshid No offence budd. But even I used to have the same thinking that experience means nothing, but after actually gathering experience of years I realised experience comes above skills (though skills matter too obviously). But no matter however your skills are, you haven't failed the number of times an experienced guy has failed, you haven't seen those bugs an experienced guy has seen. I can bet that even though you master in any stack, a guy with 2 years more experience than you will do the same thing in much less time and that too efficiently.

Thread Thread
 
tsolan profile image
Eugene

It strongly depends on how productive you was over these years. Some people can get more experience in less time.

Collapse
 
cjsmocjsmo profile image
Charlie J Smotherman

Why use a framework at all?

Collapse
 
punyflash profile image
Dmytro Morozov

1) This is not true that every bootstrap site looks the same. Every UI element on bootstrap is easily themed. If you mean that UI elements are the same - Tailwind not solving that. Same buttons, same inputs, same paddings and margins. You will end up with same page components despite any styles you use.
2) Bootstrap is modular. Even if you just throw all modules in your bundle, this is only ~210Kb. Mainly because bootstrap is not using jquery anymore. My p*nis damn bigger than this.
3) Tailwind is technology that "do nothing"... Okay maybe it allows to write html even more unreadable, but this is strange advantage over plain CSS.
4) Another spam article "this is garbage, use tailwind". I almost feel like Tailwind pays for this trash-talk, it's not even funny anymore.

Collapse
 
__manucodes profile image
manu

Love how this post is very controversial...
Also, I've edited the post, please check it out

Collapse
 
xxxdepy profile image
Deepak Kamat

Hmm... I don't understand. If you got a good designer they can use Bootstrap yet make it stand out. Bootstrap theming is a thing - it just is a matter of how much effort you want to put into it, either that, or just use the modules you want, for e.g I always use the grids utilities and that's it.

Now if you are dumping that bootstrap.min.css or min.js file while you are just going to use 1-2 types of class names it is going to be a waste of resource.

And mobile phones are very powerful today, a few 100 kbs of extra CSS code won't make much of a difference if you have optimized the site in other aspects.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.