DEV Community

Cover image for Please don't use Bootstrap!

Please don't use Bootstrap!

manu on January 30, 2022

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

Collapse
 
tosemar profile image
Tosemar Urtica da Arnica

Haha. This article is terrific. It can only be a joke. Haha.
You are very funny.

Actually this article doesn't makes any sense. It's totally wrong and has huge lack of quality and explanation. It's just your opinion ans probably you don't now anything about you are saying

Collapse
 
gi_dev profile image
G_dev

All site look the same? Mostly an issue of devs using default components without customization.

Bootstrap is huge? Minified and gzipped it's pretty small.

Choose bootstrap grid only or bootstrap w/o components. Don't pick what you don't need.

Purge unused classes and you'll have a css file more or less the same size as tailwind.

Collapse
 
spock123 profile image
Lars Rye Jeppesen

TailWindCSS for the win

Collapse
 
bolonhadev profile image
Bolonha Dev

Why why why should I use Bootstrap?
It's so insane this freak culture.

Collapse
 
nehanalinik profile image
Neha

Hey! write your own experience not the one you take it out from the Internet and post here. This is a platform where you write your own thing!
I get it from your bio you don't like css. I'm the one who doesn't like css 2months ago and look at me now create websites and designing layouts only with the help of css.

Collapse
 
invalidlenni profile image
InvalidLenni

I take a look tomorrow in tailwindcss!

Collapse
 
jhilgeman profile image
Jonathan H

Say you're searching for some piece of information and the first search result is a cookie-cutter Bootstrap site. Are you really going to leave the site without the information simply because it looks like a million other sites?

Even if you've seen the same layout a lot, how much does it REALLY matter if the content is good and the site is easy to use and navigate?

As far as size and load, if you're committed to using the CDN to load the files, then you're actually taking a lot of load OFF not only your server but others, as well.

Loading from the CDN increases the chance of already having the downloaded library in your browser cache (from visiting other sites that use the same CDN) so it loads faster on the page and reduces load on your server.

Collapse
 
fjones profile image
FJones

Funnily enough "everything looks the same!" is actually a good thing, to an extent. It reinforces UX that people get used to and know how to interact with. How much has the classic bootstrap header become the de-facto standard, even if implemented with other tech? Same thing with jQuery-ui accordions, tabs, and dialogs.

Collapse
 
gabrielbb profile image
Gabriel Basilio Brito

Funny because the site you linked loaded very slow for me 😂

Collapse
 
dutanugraha6 profile image
Novaslosiv.G

Write css by myself (:

Collapse
 
samramsan profile image
Samuel Ramirez Sanchez

Nothing like good old & light CSS3

Collapse
 
rude profile image
JICA98

I customized bootstrap for my website. Except for the hamburger menu, I changed most stuff.

Interested devs can check it out here.
finalbenchmark.com/

Collapse
 
vallerydelexy profile image
vallerydelexy

customizing bootstrap?
meh..

i use bootstrap because im still learing about web development, so do the other look-alike website (maybe?) or maybe im just lazy

Collapse
 
andreseduardop profile image
andreseduardop

Much ado About Nothing.

Collapse
 
funnycop profile image
FunnyCop

You can say this about UI frameworks in general. Bootstrap, Tailwind, Material, and all of the others only provide a means for an end and at times people will be want to take the easy way out and this is why a lot of applications look very similar. It isn't the fault of the framework.

Collapse
 
inerkyjad profile image
Hassan Aoutof • Edited

You people should really learn to ignore unuseful content, the post has 500 words (i guess) and has nothing to offer, and you find the comments loaded, this only means you ppl don't have anything better to do.
I only commented to point out that you all could use a lesson in ignoring.

Collapse
 
willkuerlich profile image
Willkuerlich

Just came to read if bootstrap is still a thing in 2022, stayed for the tasty comments..

Collapse
 
peiche profile image
Paul

Your tone was not too harsh. OP needs to educate themselves before going on a rant.

Collapse
 
tomavelev profile image
Toma

Having sites looking similar to others is not 100% a bad thing. Users can become accustomed to the UI.

The files are not that huge, especially if you use only the CSS, especially if you cache.

The fastest root is the one you know

Collapse
 
suyashdev profile image
Suyash Vashishtha

He just randomly gone through some online blog about why not to use Bootstrap and wrote this... Kiddo it is not about using Boot it is about how you use it make websites... Bootstrap is a very good tool when it comes to rapid development.. Using Pure css is like living in hell..

Bootstrap is good if you know how to use it properly...

Collapse
 
tbogard profile image
Erick Rodriguez

Seriously?
This article is :

  • biased
  • lazy
  • NO TECHNICALLY DOCUMENTED
  • Poorly detailed on caveats, issues, common problems
  • no code examples
  • no benchmarking

For a developer blog, this is bad. No offense at all. I expect blog post from dev to be quite curated and informative. This one doesn't reflect anything of that.

Collapse
 
ltsochevdev profile image
Sk1ppeR • Edited

You do realize that you can customize Bootstrap with SASS right? Not only that but you can also use PurgeCSS (same shit tailwind uses) to end up with sub 50kb stylesheet right? If not, what the fuck are you doing posting here? Bootstrap is modular system as well, you can use, say, just the grid system or the flex system or the utilities.

Collapse
 
ronnehag profile image
Fredrik Rönnehag • Edited

You can easily prototype a business application using Bootstrap default components without writing a single line of CSS.

You can easily only include the component css you use by using SCSS and import.

Your sites all look the same because you dont customize the Bootstrap CSS. Which is easy to do using SCSS and override variables. Variables for each component is listed in the docs.

The default Tailwind configuration comes with 36.4KB minified and g-zipped. Compared to Bootstrap at 22.1KB , Tailwind is 14.3KB heavier.

Collapse
 
suckup_de profile image
Lars Moelleken

In the end, many end user don't care how it looks. e.g. look at gitlab, it's ugly, but it works. And if you really care about design, then you properly do not use any CSS framework or only as starting point of your own CSS.

Collapse
 
yassineldeeb profile image
Yassin Eldeeb 🦀 • Edited

Very good points but I think you were a bit too savage in the kiddo.

Collapse
 
robclark profile image
Rob Clark

This post illustrates why knowing how to use the tools that Bootstrap is built with, at least in the SASS side, is vitally important. I'm not sure what I did to Google for their algorithm to place this in my path, but I have to try to respond to at least some of it.

In regards to visual distinctiveness, you can quickly make your site look entirely different from other Bootstrap sites if you know SASS. Importing the source SCSS files allow you to quickly change the variables used to generate the framework's CSS. This gives you control to change virtually any part of the framework to fit any custom design you need it to match. Need to use a 24 column grid instead of 12? Literally one variable override, with col classes regenerated to match. Need to change core attributes about how all button variations appear? There's a variable for pretty much every minute detail. Need to enable or disable global things like rounded corners being used? There are bools galore. You can even add or remove breakpoints by modifying a single array, and classes are automatically generated on compile to use them. And since default variables are all set using !default, you can override them from the SCSS file that imports the framework, meaning that all of you customizations reside outside of the source SCSS files, meaning you can quickly upgrade said files as needed.

In terms of file size, this can easily be mitigated through a mix of CSS minification and only compiling SCSS for the components you use. In terms of importing Bootstrap's source SCSS files into you project's primary SCSS file, you import a single file, which itself just imports files for each component. Not using something? Just remove it's import statement. Both compiles and minification can be automated through tools like gulp.

Collapse
 
gokhancelebiyim profile image
Gökhan Çelebi

The purpose is not making diffrent or fastest website.

Purpose of using bootstrap is that to make development as fast as possible!

Collapse
 
arnoldddev profile image
Arnold

Yo, stop making posts like this.
It's preference, you use what you like and what you know how to use. Sites looking the same, I think that's from the developer and the UI designer.

Collapse
 
ismagilovkamil profile image
Kamil • Edited

Actually, if you used to apply utility classes from Bootstrap, then your project will look like you use Tailwind.

Collapse
 
moconinja profile image
MocoNinja

make me

Collapse
 
sudhanshu786kumar profile image
sudhanshu786kumar

So said it so true ! 🙌

Collapse
 
ozzythegiant profile image
Oziel Perez

As a Tailwind fan, this only makes me want to use Bootstrap even more. 🤣 Why should we be forced to pick?

Collapse
 
pljay profile image
Pathum Lakshan

Eventually it's your personal opinion, if you really care about performance(because you mentioned file size huge)then there's lots of other things to take care of.

Collapse
 
grocker42 profile image
Grocker

Really all tailwind css Website look also the same atleast i mostly can tell you if something is tailwind css or not. What matters is thaf it looks just good.

Collapse
 
mcdtbo profile image
Thabo Pali

Thank you for the suggestion

Collapse
 
barbosa89 profile image
Omar A. Barbosa Ortiz

Tailwind forces you to create your own Bootstrap jajajaja

Collapse
 
ashley_powell_b8d5682389d profile image
Ashley Powell

We use bootstrap at Snizl.com 😁

Collapse
 
yadhukrishna profile image
Yadhu Krishna

Don't attack his qualifications, like saying he is an 8th grader or something. Just debate the point he is putting forward, if you have any.

Collapse
 
bigbadmytyx profile image
bigbadmytyx • Edited

That sounds like trolling. Do you have any experience with bootstrap customisation?

Collapse
 
__manucodes profile image
manu

I've used bootstrap before...