DEV Community

Cover image for Why I don't use Bootstrap anymore.

Why I don't use Bootstrap anymore.

codedgar on December 20, 2019

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 ...
Collapse
 
rolibkk profile image
Roland Heller

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.

Collapse
 
brettsschmidt profile image
Brett Schmidt

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)

Collapse
 
crongm profile image
Carlos Garcia ★ • Edited

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.

Collapse
 
thefeorluwarh profile image
Thefeorluwarh Babs

Is it possible to use bootstrap to develop Project management application?

Collapse
 
rockykev profile image
Rocky Kev

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.

Collapse
 
expdev07 profile image
ExpDev

I don’t see how not?

Collapse
 
tayambamwanza profile image
Tayamba Mwanza

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

Collapse
 
voughtdq profile image
Douglas Vought

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.

Collapse
 
tungdt90 profile image
Tung Do

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.

Collapse
 
codedgar profile image
codedgar

I'm totally gonna test Sass! Can you link a beginner tutorial so I can check it out?

Collapse
 
leopinzon profile image
Leopinzon

You gotta be kidding, so you’ve never seen sass prior to writing this article?

Thread Thread
 
codedgar profile image
codedgar

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 🤷🏻‍♂️

Thread Thread
 
leopinzon profile image
Leopinzon

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

Thread Thread
 
codedgar profile image
codedgar

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

Collapse
 
voughtdq profile image
Douglas Vought

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.

Thread Thread
 
ferdelvalle profile image
Fernando Del Valle

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.

Collapse
 
expdev07 profile image
ExpDev • Edited

Learn about how to use SASS to extend bootstrap instead of just dropping it due to size. It’s become a really infamous framework due to being abused by beginners, but it’s great if you learn how to use it properly.

Collapse
 
jhulten profile image
Jeffrey Hulten

I think the point Codedgar was making is that Bootstrap has become a golden hammer. Sometime we allow a tool to become more than it needs to be. Tool developers do this by adding more and more features. User developers do this by using a given tool as an article of faith instead of a intentional decision. 500k overhead for a landing page is a lot!

Thread Thread
 
expdev07 profile image
ExpDev

That is true. And it has become very infamous among some developers for that reason. However, as I mentioned in another post, you can use sass (which Bootstrap 4 was made with), to manually include components/features that you want (e.g bootstrap-grid). It's extremely easy to customize to your likings through variable or class overrides.

Also, Bootstrap isn't just a tool-- it's a framework, so naturally it will have a lot of features (but again, you can opt-out if you'd like less KBs).

Absolutely, you should understand what CSS is before using Bootstrap. But the points brought up in this article are misleading:

  1. Weight - Solve this with SASS (which is really meant to be used with Bootstrap 4) by importing only features/components that you need. You also don't have to use jQuery. It's completely optional at the expense that you won't be able to use JavaScript based features such as modals, dropdowns, scrollspys, etc.
  2. Components and utilities - See 1.
  3. Styling - Using SASS will allow you to specify overrides without using "!important".
Thread Thread
 
steventew profile image
Steven Tew

This is exactly what I thought when reading the article, misleading and ill-advised. Bootstrap has been designed and built to address all of the points raised, allowing users to pick and choose, customize and override, flexibility at heart. I could possible argue that it can feel a bit dated at times, and there can be classes that you do not use, but the only way to avoid this, as with any Framework, is to build your own to match your specific needs.

But the biggest negative I find in using any prebuilt framework, is that once its in place in its hard to replace it. Investing time at the start of a project to assess whether or not the framework meets your needs (and future needs) is time well spent.

Thread Thread
 
lexiebkm profile image
Alexander B.K.

In my next projects that use React, I will need to consider about using these libraries : React-Bootstrap, Antd or Material UI. Maybe a combination of them, depending on certain features that will fit to my needs. In my current app, Bootstrap dominates, although there are already some parts I write using Antd or Material UI.

Thread Thread
 
johnnywalker2k1 profile image
JohnnyWalker2K1

This is nonsense. Why are you including styles you are going to override? If you're using Bootstrap for its Grid Layout then just use a framework that only does that.

People think if the payload is small then there's no issue, but your browser still has to parse all those unused styles.

Collapse
 
marcusatlocalhost profile image
Marcus

Here are Bootstrap Sass mixins to use gist.github.com/anschaef/d7552885c... and here is a nice article how to use them: medium.com/@erik_flowers/how-youve...

Collapse
 
lexiebkm profile image
Alexander B.K.

"You also don't have to use jQuery. It's completely optional at the expense that you won't be able to use JavaScript based features such as modals, dropdowns, scrollspys, etc."
When I want to control my modal behaviour, I am forced to use jQuery. because using the attribute of data-toggle doesn't work exactly as I expected. I use modal forms massively, because there are a lot of forms in my app.
For my React based project, there are other alternatives for GUI toolkit other than Bootstrap (React-Bootstrap) such as Antd and Material UI. Currently I use Antd for closable dynamically added tab components; I use Material UI for switch components. The remaining parts are built using Bootstrap.
My app is quite large; it is about KPI management system that I develop alone : from front end to back end. So I don't have enough time to do refinement on the GUI.

Collapse
 
angularnodejs profile image
AngularNodeJS 🚀 • Edited

If you're using CPanel to develop a website, using Bootstrap is least of your concerns. Most likely, your on a slow host with tons of resources and network speed issues.

jQuery is going away in Bootstrap 5, most CDN already have bootstrap cached for quick download.

If you enjoy fixing CSS compatibility bugs in multiple browsers than by all means roll your own CSS.

Getting new developers to learn "your css" is a waste of time, when most devs already know Bootstrap. So your team productivity will continue to suffer. If they extend your home-grown CSS, the code will just become a horrible mess.

Unless you're a lone ranger dev, using Bootstrap is not a big deal. In fact not using it, is unwise.

Collapse
 
robertwent profile image
ʇuǝʍ qoɹ

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.

Collapse
 
codedgar profile image
codedgar

From what I know you can not use Sass on a pure HTML project :o

Collapse
 
expdev07 profile image
ExpDev

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.

Thread Thread
 
codedgar profile image
codedgar

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

Thread Thread
 
expdev07 profile image
ExpDev

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.

Collapse
 
robertwent profile image
ʇuǝʍ qoɹ

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.

Collapse
 
slryit profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
Silvan

Script kiddie go back to your lessons

Collapse
 
idenyigabriel profile image
Gabriel Anthony

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

Collapse
 
gibbitz profile image
Paul Fox

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

Collapse
 
expdev07 profile image
ExpDev

Then use sass, and bring in only features/components that you need such as the grid??

Thread Thread
 
gibbitz profile image
Paul Fox

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

Thread Thread
 
expdev07 profile image
ExpDev

Again, everything is customizable. Even the breakpoints. It’s just a matter of overriding the variables.

Collapse
 
slryit profile image
Silvan

Whena coder criticize Bootstrap to suggest Materialize, I stop to read 🙄

Both are frameworks with opinionated designs.

Collapse
 
lprefontaine profile image
Luc Préfontaine • Edited

Given the CDNs available worldwide and intelligent caching done by web engines plus
the amount of memory available to most browser for cache,
I find your point #1 irrelevant. If JS libraries would comply with the Google compiler,
that size could be reduced, the compiler can identify unused code and remove it from the
compilation target. For now it's cheaper for lib maintainers to not jump on that train.

2) Yes and no. The day you need a component and it's not readily available,
you have to jump in some hack to implement it or import it.
Basing your decision on 'I will never need these' is
a short term decision that may come back and bite you.
The only real 'no' here is that you might have to dig to use a component
you don't use often or never used.
Is this worse than hacking something in your shed ?
I don't think so.

3) See 2)....

Collapse
 
codedgar profile image
codedgar

Amazing answer :o

And I agree on you on the main part. But in point 2 I have to say that yes! I prefer making my own things!

This helps me create a component that can match the look and feel of the website completely instead of having to customize an already existing element. And maybe add little details that are not present on Bootstrap.

Some people may say that creating my own components for websites it's not optimal, but that's why I said "I" on the title 😄

Collapse
 
lprefontaine profile image
Luc Préfontaine

In the context of executing a contract for a customer, you cannot let that happen.
It's already hard to do a decent knowledge transfer, anything out there that is already published
and maintained should be used as much as possible.

I used to like to do my own things in assembler. But it was a different era and because of
limited hardware at the time it was on many occasions a 'logical' choice,
I remember though a customer that refused to buy a C compiler (5k CAD at the time)
for a distributed transactional system.
I ended up coding 40k lines of assembler (and I used macros extensively). 😬
Not a good business decision. This ran for more than 3 years w/o failing before being replaced
by a better business decision.

I and you are not eternal albeit you may have more time left than me (58 here).

Collapse
 
uniibu profile image
uni

For a native Frontend Developer that uses straight-up HTML/JS/CSS or for small projects, you may have some valid points there.
But for a Frontend JS Developer that uses modern Frameworks such as VueJs, React and Angular those points given are no longer a "caveat".

  • Size no longer matters because of the term "Tree shaking". It removes dead/unused codes making the size very small.
  • Js Frameworks allows you to choose only the components that you actually need.
  • And for the CSS, it is pretty much the same, you could pick only the ones you need.
  • Bundlers such as Webpack or Rollup or even Gulp also perform optimizations on your vendor assets.
Collapse
 
lexiebkm profile image
Alexander B.K.

Especially for a full stack developer, time constraint is one factor that determine whether to use libraries/frameworks or not.
I use React as well as several libraries for data entry, data visualization (charts, gauges) for dashboard and reporting (currently only PDF format). For backend, I use PHP + Laravel, and mySQL for database.
So I cannot spend much time to create GUI from scratch using only HTML and CSS. There are so many other things that need my attention in order that my app run as expected.

Collapse
 
codedgar profile image
codedgar

Totally right! I'm a native frontend developer 😄

Collapse
 
imcheesecake profile image
Freddie

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!

Collapse
 
thomasobale profile image
Thomas Obale • Edited

To be fair, bootstrap 4 was not designed to be used on it's own. It is built with SASS to allow you to only use components you need. JavaScript has advanced far enough that you do not need jQuery to work with the CSS framework.

Collapse
 
expdev07 profile image
ExpDev

Agreed. Author is just misleading a ton of people, and making claims on a topic it doesn’t really seem like they understand.

Collapse
 
camerontbelt profile image
Cameron Belt

I totally agree, I wish people would stop using it personally. I see devs using it as a crutch so they do t have to actually learn how anything works or how to do things properly from scratch. I would argue most devs that praise it probably have no real understanding of CSS.

Collapse
 
slryit profile image
Silvan

The opposite is also true, newly formed coders who are producing cheap websites working on their Safari or Google chrome, incompatibles with the other browsers with totally un-maintainable code.

Collapse
 
natas7509 profile image
natas7509

Wow! Great post. I'm an Intern and love styling everything from scratch. But here is why I didn't like my last bootstrap experience. My boss asked me to copy an existing landing page that was built in WordPress. He asked me to use BS, "ok cool!". All of the required files to build the page were images that were pre Designed by a graphic designer (I'm sure my boss was testing me) so at the end of the day (2 days) I had built a nice landing page that WASN'T exactly the same as the example, and there was absolutely no way to make it exact due to BS conventions. It got very close, and the boss loved it. But the frustrating part of the project was 1) I ended up with a fairly hefty CSS page with separate and intricate responsive stylings and 2) that type of thing should have only taken me 3 hours at the most. I know that BS is designed for speed and quick prototyping and it was unfortunate that I had to work with images only. I didn't have complete control, and that bugged me.

Collapse
 
jsn1nj4 profile image
Elliot Derhay • Edited

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.

Collapse
 
giorgosk profile image
Giorgos Kontopoulos 👀

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

Collapse
 
stelco profile image
Steven Collins

I have used bootstrap for many years. I recently started using React, so now I use react-boostrap. Its great as it allows you to load only the components you need, plus it allows for server side rendering which is ultimately what I was looking for.

Collapse
 
lexiebkm profile image
Alexander B.K.

Have you tried Antd and Material UI for creating GUI with React ?
When I needed a Switch component that had to be a controlled component, I found that only the one of Material UI that ran as expected.
I use Antd for its Tab component, because it provides example on closable dynamic tabs which I need. React-Bootstrap doesn't provide guide on how to do it. But if I only need static tabs, it is sufficient. So in my app, I use these different libraries to create certain features.

Collapse
 
stelco profile image
Steven Collins • Edited

Yes we originally used Material UI but I wanted to use a bootstrap library so react-bootstrap was ideal. I am using third party libraries for tabs and for datatables. After a lot of trial and error, this seems to be the best set up for us (so far!)

react-bootstrap.netlify.com/
github.com/jbetancur/react-data-ta...
github.com/YazanAabeed/react-tabs

Thread Thread
 
lexiebkm profile image
Alexander B.K. • Edited

React-Bootstrap is nice. I will probably use it in my next projects.

For datagrid/table, my requirement is the lib has to provide features as follows :

  1. Inline editing : user can edit data in the grid cell
  2. Row grouping : data can be displayed in hierarchical format to multiple level and still provide inline editing
  3. Fast rendering for thousands of records

For these features, I find two free libraries that I use in my app :

  • ag-Grid : ag-grid.com/react-grid
  • Tabulator : tabulator.info For row grouping, unfortunately, ag-Grid only provides it in its enterprise edition. So for that purpose I use Tabulator which is fully free. There are React versions of both libraries.

As for tabs, I think you may want to consider other libs. The lib you mention only has one contributor, so for me, it is doubtful to be used.
You may try the following :
github.com/reactjs/react-tabs

Furthermore, in case you have never known, there is a site that has a collection of various kinds of React libraries :
github.com/brillout/awesome-react-...

Collapse
 
durante profile image
Durante

Well now days you can make customizations to bootstrap super straightforward without use important using the theming approach and import only what you need using sass check it out.

And if you are using framework like react and angular there are open source project that have bootstrap component work without jquery at all like: ngbootstrap and reactbootstrap .

I think there are good alternative. I hope you like.

Collapse
 
weeb profile image
Patrik Kiss • Edited

3- Is the design important for this?
If your answers are: Yes, yes, and no; Go ahead and use Bootstrap without shame.

So basically you are saying you're can't create a good design with bootstrap?

Sorry, but that's just...well, dumb.

Collapse
 
codedgar profile image
codedgar

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 😄

Collapse
 
sererejegede profile image
sererejegede

One very useful thing to use, especially when I am using Webpack(or alternatives) is something like PurgeCSS. It basically just removes unused CSS.

One major advantage of CSS frameworks is that they make collaboration much easier. Plus marks for accessibility and responsiveness especially when time is a luxury while the major disadvantage would have to be that they often do much more than you need.

Collapse
 
codedgar profile image
codedgar

I saw PurgeCSS a lot of time ago too! I tried to use it but it removed a lot of CSS that wasn't supposed to be deleted, including media querys. I don't know if this was already fixed

Collapse
 
tomstaveley profile image
Tom Staveley

Have used it before plenty of times without a problem. It could be down to the way you have it configured, as it's not a simple plug and play. You need to ensure you specify all your templates where you reference any CSS.

Collapse
 
adrianjonmiller profile image
Adrian Miller

Your process and conclusion are very similar to my own. What made me abandon Bootstrap was how often I had to write incredibly specific overrides to get the results I wanted. My selectors got more and more specific and required more and more weight to inherit the styles the way I wanted. It also felt disingenuous to apply a generic style library to my client’s sites when my job was to create something custom tailored to their tastes and needs. All that just lead me to the conclusion that bootstrap was not saving me time or making my designs better: the two things it’s supposed to do.

Collapse
 
momander profile image
Martin Omander

I agree with the author. For someone like me, who focuses more on the code than the styling, Bootstrap was a godsend in the early days. But over time it got heavier, especially if you used another library to add material design on top of it. Recently I converted a web app from Bootstrap+MDBootstrap to Bulma. The JS bundle size was cut in half, as was the amount of HTML I had to write (and maintain in the future).

Collapse
 
ajmas profile image
Andre-John Mas

The issue I have with bootstrap is that it requires you to tailor your html to bootstrap, which seems a little back to front. The CSS should really be adapting the html.

Additionally, if you start needing to do anything outside the scope of bootstrap then you end up having to workaround any bootstrap assumptions.

Collapse
 
metruzanca profile image
Samuele Zanca

If i had to make something I'd never use bootstrap as the default styles imo are pretty ugly considering today's trends.

I also dislike flexbox grid for some of the same reasons I dislike flexbox. e.g. +100 divs and something you could easily write yourself and probably be more precise (assuming you know what you're doing)
tho flexbox grid is definetly the best of all the css frameworks I've seen.

Also, as far as compiling styles like you mentioned with nodejs. Very simply with react or similar tooling which compile things down to a static website, bootstrap would get the treatment you were talking about where unused styles aren't used in the compilation (iirc) however with react this thing exists react-bootstrap.github.io however thats a solution to a problem that didn't exist as I'm pretty sure most react devs would prefer to make their css with something like sass, less or css components.

Collapse
 
codesinthedark profile image
Srdjan Mitrovic

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.

Collapse
 
csumner profile image
Chris

From past experience, I found that most implementations of Bootstrap were very poor. Either, including the entire framework or abusing the framework with a skip full of overrides, additional (and in some cases multiple) themes, etc.

With Bootstrap Vue now readily available, the reliance on jQuery is absolute tosh.

The moral of the story here is to use the right tool for the job and use it correctly. Remember the saying "You don't use a sledgehammer to crack a walnut".

Admittedly, that's easier said than done.

Collapse
 
ed1nh0 profile image
Edson Jr.

Leaving aside the purpose of the article, I'll disagree with you on item 3. Since BS 4.x and the adoption of SASS pre-processor the theming and customization issues turns it far more easy to deal with. The use of the !default flag for ALL available variables made it pretty easy to config for everyone needs. They still use jQuery for all the behaviors indeed but I think it's a matter of time to get rid of it.

Collapse
 
andrewsmith289 profile image
Andrew Smith

There is also the option to create a customized version of Bootstrap. It involves installing bootstrap with npm/yarn and editing the default Bootstrap scss to exclude whichever components you'd like.

See Klooven's answer for instructions at: stackoverflow.com/questions/457259...

Collapse
 
adamculpepper profile image
Adam Culpepper

"And using Bootstrap means that you have to use also jQuery..." is a bit misleading. You only HAVE to use jQuery if you're going to use Bootstrap modals, dropdowns, etc. I do wish Bootstrap would come out with a tool like jQuery UI (jqueryui.com/download) that'll allow you to select which modules and pieces you want so the payload is much smaller and faster.

Collapse
 
biz941 profile image
biz94

Lovely Indeed the article is. I have been developing world class apps and software and would like to say If you are a Beginner / Non UX familiar / Front Desk Operator then bootstrap is for you.

If you know the Pixels and the Density and the Mobile / Desktop / Web works then write your own framework. Never depend on frameworks they close down in time. Write the Native language. So write your own framework, it could be done in few lines for world class products.

Collapse
 
karlkras profile image
Karl Krasnowsky • Edited

So you roll all of your own components (which would be the #1 reason I would incorporate a 3rd party framework)? If so, you should publish your own framework.
For layout, why use a framework at all and just use native grid and/or flex?

Collapse
 
tayambamwanza profile image
Tayamba Mwanza

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

Collapse
 
weirdmayo profile image
Daniel Mayovsky

Well, from the productivity standpoint, writing your own hamburger menu's and making them all appear correctly on mobile, tablet and others...

Making the sidebars, dropdown components that work on mobile correctly, and all the other things that a simple app might need.

Rewriting these things instead of using the framework is almost the same as inventing the wheel all over again. I use Bulma, which is lighter and more opinionated than Bootstrap, doesn't provide atomic classes, and anything on that level of case-to-case usage. But it does provide modules that you won't use on a simple website.

Anything beyond a landing page requires an efficient developer to use a framework. Especially when you are working alone on the project, playing around with hamburger menus is just a plain waste of time.

Collapse
 
codedgar profile image
codedgar

I totally agree on everything you said! That's why I said that if you want to develop something fast you can totally use Bootstrap!

Collapse
 
efjspencer profile image
Ed Spencer

I like your post, but you're falling into the trap of talking about package sizes before gzipping. Bootstrap 4 is 20kb gzipped. That's the actual number of bytes that'll go over the wire to the client.

Collapse
 
rockykev profile image
Rocky Kev • Edited

I get where you're coming from. I'm with you... I don't like Bootstrap's bloat and always find an alternative/roll out my own.

But this post is so very highly opinionated so much that it can be misleading to make people think Bootstrap is BAD. It's a tool, like a hammer or a shovel. They both can dig a hole... only one is more painful than the other.

Choosing Bootstrap is often a project preference, not a personal one.

I've built quick landing pages and I've built giant enterprise front-ends. For quick landing pages, of course I'm going to avoid Bootstrap and roll out my own systems. But for enterprise software with multiple designers, I'm going to use bootstrap so we have a unified language to communicate with.

They're just tools. And this post is picking a side and creating division for no reason.

Collapse
 
codedgar profile image
codedgar

Yeah! I did my best to try and not come across like I hate Bootstrap and I think is the worst thing ever created. I agree on you on everything you said. There a lot of ways to do the same thing

Collapse
 
andevr profile image
drew

Yeah I've looked at bulma. I'm planning to use it in my personal projects. Seems easier to use than Boostrap.

Collapse
 
petariweb profile image
PGii

I completely agree. There are lot of components what we are not using. Let's say example, we can use flex grid system and cards or sections, so why we just get the Flex Grid System with variables for responsiveness and type our own sass/css for Cards, Sections, Articles ...

it's not so bad to type 500 lines sass/css code for components only what we are using or at least borrow from bootstrap only that comps what you need.

Collapse
 
appurist profile image
Paul / Appurist • Edited

I do agree with most of this post, and my support is mostly based on the fact that there are so many alternatives, and no single package is the best solution for all projects. It depends on your goals.

For those wishing to keep it ultra-lite, I recommend Tailwind CSS. It's very lite, and has a refreshing approach to actually avoid providing components, except those you factor out yourself when you use them more than once, components you'll provide yourself from really consistent and easy-to-use and learn CSS directives.

For those wanting a full-featured library of high-level components but one that can be reduced to only those you actually use, I recommend Vuetify (for CSS components), which makes use of Vue for a framework.

Collapse
 
thumbone profile image
Bernd Wechner • Edited

I think your concern with weight warrants a little exploration personally. There are a few different concerns bundled in that idea.

A very common one of course (albeit not the only concern) is the download cost. But it behooves us to note that using a very popular library and linking to it from a very popular source is popular precisely because it addresses this concern, engaging the strong likelihood that the library is already cached, by virtue of its ubiquity and popularity.

Collapse
 
typo3freelancer profile image
Simon Köhler

A lot of things have changed now with Bootstrap 5 and my philosophy is: use only what you need. I do that with SASS directly, so Bootstrap always comes handy when I need to work fast. I know how to to it without Bootstrap, but why waste my time over and over again?

Collapse
 
arshamaazami profile image
arsham-azami

Hi codedgar
Bootstrap is a useful ui framework work but as you mention, bootstrap has so many components and utilites that when we install it we do not even use half of them and they will be there anyway
for building a simple web page or website it is not necessary to use it or when you want to build your own component or costume styling
But in my opinion bootstrap is a great framework for building large-scale applications and many famous app use bootstrap like udemy, and Spotify and Twitter

Collapse
 
bam92 profile image
Abel Lifaefi Mbula • Edited

I agree with the use of !important that I don't appreciate in Bootstrap. I remember I spent a lot of time trying to figure out why my custom CSS was not visible until I found that I had to overwrite Bootstrap style with that !important.
In the meantime, did you give Bulma a try?

Collapse
 
tamb profile image
Tamb

You can pretty easily customize Bootstrap and import only what you need to use. I think it's gotten even better with version 5. I would recommend people reconsider it. It's also got TONS of utility classes, which I find helpful.

Collapse
 
anaganisk profile image
Sai Kiran

Off topic but i snapped the pic used on the cover, totally was surprised to find it in the wild.

Collapse
 
codedgar profile image
codedgar

Holy hecc! Hahahaha Nice pic man it's amazing

Collapse
 
doubleedesign profile image
Leesa Ward

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

The fact that you think this shows that you just don't know how to use Bootstrap efficiently.

Collapse
 
andrewscofield profile image
andrewscofield

I've never used out of the box bootstrap because of all the reasons you mentioned. I use them because I like the css class naming conventions. It makes sense to me and I use it across all my custom css too. But I do use the scss and cherry pick the parts I need for a specific project. In my case it's almost always just resets and grids and navs. Variables make it so I'm not overwriting a bunch of their code and I get very non-bootstrap looking websites.

Collapse
 
jcarlosr profile image
Juan Ramos

About the Weight part, it's worth to mention that you don't need a Node.js server to remove the unused CSS. This optimization can be done using tools and publishing the resulting assets.
I'm not really into frontend development, but for Laravel projects, we have a tool named Laravel Mix. This is a wrapper for Webpack.
And we have plugins like purgeCss that automatically removes the unused CSS and generate assets ready for production.

Collapse
 
shikkaba profile image
Me

Using the SASS version of bootstrap makes it super customizable. Everything is done with variables, so you just override the variable. No important required.

You can build your own version of bootstrap. Don't need certain components? Don't add them to your build.

True about jQuery, and I wish it didn't need it, but alas.

Collapse
 
jrsofty profile image
Jason Reed

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.

Collapse
 
yuthyia profile image
Yuthyia 🕊 យុធ្យា⚖

Good read. Thank you. I just finish HTML and CSS about to embark on JS. But I heard a lot of bootstrap could open me more into CSS framework. I tend to agree with you, now i'm on bootstrap track, that If we need fast and rust front-end, bootstrap is the best approach. However, crafting by my hands would be event prouder! Thanks you looking for your next article about CSS grid. I think I like grid then flexbox.

Collapse
 
albertobsd profile image
Luis Alberto

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.

Collapse
 
scrabill profile image
Shannon Crabill

I also stopped using Bootstrap recently. It worked, but I also found that for the setup involved (personal projects, portfolio sites, etc) I wasn't using much of it.

I started using Bulma which feel much lighter and easier to use.

Collapse
 
pflash profile image
Precious adeyinka

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.

Collapse
 
brycesnyder profile image
S N Y D E R H A U S • Edited

I've used Bootstrap for years. I still think it's beneficial for rapid prototyping and just getting stuff done fast and efficient, Especially for just building a website. out of the box with minor tweaks you can have a website up and running way faster than having to build that everytime.

Collapse
 
justrhysism profile image
Rhys Lloyd

“But Bootstrap is less than 500KB"

Am I the only one who thinks 500KB is HUGE?

Collapse
 
toniyevych profile image
Andy

Bootstrap is the right tool, when you need to quickly create some kind of UI without the existing graphic design.

In all other cases it brings more problem than it solves.

The main and the most important problem with Bootstrap is a lot of global classes, which may cause unpredictable side effects.

Collapse
 
bayustudio profile image
bayustudio • Edited

Thanks for interesting writing, but there's a bit misleading here :-)

1 & 2 & 3. you dont have to use entire bootstrap. its highly modular and customizable.
for css all you need to do is get any sass app then just include bootstrap parts you need, and override bootstrap's variables.scss

for JS, you can exclude it entirely. Its optional. or you can just use required module. you can do this even without module bundler. using the old way script include.

eg: i only use grid, some utils & dropdown, and get small enough build for my page.

For Sass app, there's easy GUI like prepros or codekit. You dont need nodeJS or any fancy server stuff to customize bootstrap.

My opinion:
when you decide to ditch bootstrap by using other smaller framework or even write your own, thats good.

However consider with the project growing, you'll most likely write a lot of utilities or helpers that eventually makes your codebases mimics what bootstrap trying to solve (perhaps not as elegant).
Why not just use things that kinda standarized and well documented?

For learning, you can always see the source code and see how things work. even make your mini framework based of it.

Bootstrap is opinionated but still flexible enough for most of styling need. It just battle tested.

Collapse
 
dbshanks profile image
Derek Shanks

My biggest complaint of Bootstrap is its specificity battle. I am really good with CSS specificity but Bootstrap has tons of Gotchas waiting to stress a developer. Aside from Foundation I have not worked with a framework like either of these for this very reason.

I’ll be honest I am surprised when I see completed templates from developers who used Bootstrap. I can’t imagine the patience required. My fuse blows very fast after a few errors. 😂

Collapse
 
leob profile image
leob

I do have a remark about point 1: Bootstrap doesn't necessarily weigh 500KB - using their SASS system you can easily include only what you need, and get that 500KB (I wonder if it's really that much at all?) down to between 100 and 200KB.

By the way: Bootstrap 4 is smaller and more lightweight (and better designed, it uses CSS Flex) than Bootstrap 3. And yes for some components jQuery is needed but if you really don't want jQuery then there are replacements (there are also React and Vue versions of Bootstrap that don't use jQuery).

Regarding styling, I don't find Bootstrap that hard to style (override), maybe it's a difference between Bootstrap 3 and 4 ?

Collapse
 
marioernestoms_34 profile image
Mario Ernesto

Codedgar for me the problem of write your own css from Scratch is when you work on project with a big team. Bootstrap solves this problem because anyone in the team will write equal code. And if during the project enter a new one this person isn't will have problens to understand de code and start on the project. With css from scratch this person will need time to understand and this take time. For projects that you work alone it's okay but for large global teams with different work time this could be terrible. Thats the reason of I still prefer work with frameworks like Bootstrap.

Collapse
 
massa1240 profile image
Massa

Totally agree with your points. I was a very heavy user of bootstrap into a point that I couldn't start a project with anything else. It was easy to use, I was used to the class and it could make a kind of beautiful design without much effort for my non-design skills. However, worrying more and more about page speed, size and not used components - specially my hatred against JS - it made me to rethink if I really should start projects with bootstrap (or even other frameworks). The one you said seems interesting for the size and probably would cover 90% of my needs wich is dealing with grids and responsiveness. For my latest project I tried bulma and fell in love too. It covers pretty much all the components I needed for this project and for the rest 10~20% I just didn't include their sass files (still bothered me that I had unused classes tho). And the best part is: no embedded JS which, for me, is the worst outcome of the end of this decade! It allowed me to have a quite nice design, easy to build, easy to customise and a very very thin layer of javascript just to make some elements clickable and some dynamic content that the project required. I hope for this new decade the frontend community understand the monsters we are creating with tons of (not used) javascript that are being transferred over the wire and slowing down and overall user experience as every webapp and website nowaday come with tons of JS (components, tracking, ads, etc etc)

Collapse
 
mort3za profile image
Morteza Z

Thanks for sharing your ideas.
I think your example is too simple, Bootstrap is used for bigger projects.
Btw personally prefer a framework that has many features but able to treeshake it easily (for enterprise applications)

Collapse
 
shivenigma profile image
Vignesh M

I understand your points and mostly agree to it, but bootstrap also allows you to get a custom build which includes only the components you need to use.

Have you tried that? We can also use bootstrap without jquery and bootstrap.js, the js part is only used on some areas of the framework. For the Layout and other CSS only components, JS, Jquery is optional, you can also ignore the same in the custom build as well.

I am not arguing in favor of bootstrap, its heavy and we can do great looking websites without it, but it has options to overcome the issues you state with it.

Collapse
 
aboudard profile image
Alain Boudard

Ha ha I totally understand !
I really think that if you can, you should try to get rid of bootstrap.
Myself, I can't not use a framework, I have to check on the work of many developpers who don't like or understand css very well, and having them following bootstrap guidelines is kind of mandatory. Also I don't like Material 😅
Thanks anyway for the thoughts.

Collapse
 
benjaminmichael profile image
Benjamin

You only have to download it once that's how browsers work. So yeah your landing page was 500k (if youve never been to a site with bootstrap content before) and then every click from there is seamlessly smooth. The files are cached on your client. Its literally more optimized than your alternative even if its just downloading a css file with 1 line in it that's more than 0. So by the rulebook of the overoptimizers: bootstrap is more optimized. Now what are you going to do or did your head already explode? You literally HAVE to reuse css and probably should use a popular framework. These are not my rules I find it silly and pointless you are the ones who count kb of file size and .00001 seconds matters to you people. Enjoy bootstrap.

Collapse
 
bofcarbon1 profile image
Brian Quinn • Edited

Truth be told as I do more Angular and React I see more examples that use other CSS choices such as SASS, LESS and even Font Awesome. For example an Angular 4 multi select tool that I found very useful. So my app combined bootstrap with font awesome in that case. App level, template level and in-line level using lazy loading and ... well you get the picture. I seldom feel I have control over it anymore. I just assemble it all and hope the UI/UX looks good, is uniform and functional. I will agree that JQuery has some issues with browser tools such as Google auto fill. Newer scripting tools are building fixes that corrupt results when the tools clash. The JQuery are not keeping up. This is problematic in maintaining web sites that are older. JQuery was very good to me I should mention but users want their browser tools and not excuses when glitches occur.

Collapse
 
terrivalentin14 profile image
TeRri Valentine

As a coding newbie, we were required to build a project as a graduation requirement for the Bootcamp that I attended. The mentor(s) suggested using Bootstrap. I liked it but we were also required to complete a course in Treehouse. I enjoyed the Treehouse course because it also required that I learn about Flexbox Grid. :-)

Collapse
 
stanwmusic profile image
SWSiteDesign

Coincidentally, I just made my first Flexbox Grid layout a few days ago an I really like it.

Collapse
 
5456qwe profile image
1214586

thanks for the Flexbox Grid library!

Collapse
 
craftyhydra profile image
craftyhydra

I ran into many an issue trying to implement bootstrap into an ancient app.

Ended up using bulma, worry about out of date jquery later.

Collapse
 
jefferson8motta profile image
Jefferson Motta

I don’t use frameworks, I design a responsive css with less than 10 lines and js with 15 lines.

Collapse
 
diversemix profile image
diversemix

Great writing style👍

Collapse
 
codedgar profile image
codedgar

Thanks! My main language is not English so this means a lot to me! 🐈

Collapse
 
mvndaai profile image
Jason Mavandi

I use bulma.io/
It is built with flexboxes and you can customize which components you want.

Collapse
 
mjaumjau profile image
Karl Ward

I was thinking the same. Too many unused components, some which don't look appealing any longer. Too much CSS and jQuery-Javascript. Too many classes for stuff you will never use ... Hundreds of grid utility classes "w-100 d-none d-md-block offset-md-3", when it's simpler and more intuitive to create your own grid with flex or modern grid css. After a stint with Bulma, I found myself back with Bootstrap using a few select CSS components via SCSS. I like their forms/buttons/groups css and a few other components that I don't want to re-create from scratch. I don't want the bootstrap Javascript/jQuery, as it can easily be replaced by native Javascript or CSS-only, at least for many components. With Bootstrap 5, at least they are getting rid of jQuery ... But I feel the project has lost it's head slightly, and some component designs are still based on Bootstrap 3.

Collapse
 
withmussy profile image
Mustapha Salehi Pour

hi,I agree with you bootstrap is just Flex and column and row, why we should use it?

Collapse
 
rosskenney profile image
Ross K • Edited

I usually just use the bootstrap reset and grid, but as someone said earlier with sass you can pick which components you want and then to further strip it out you can use purgecss or something like it when compiling everything. I would highly recommend using the sass version over loading in the basic compiled css. You can also override a lot of settings by using it. You can make bootstrap exactly what you need and I would say you should do this with all frameworks. There is also Bootstrap Native that uses vanilla JS with no need of jQuery.

Collapse
 
attkinsonjakob profile image
Jakob Attkinson

Have you tried Foundation? What do you think of it?

Collapse
 
divand553 profile image
David James

lol just you don't use it, don't say all of us

Collapse
 
truechernyshov profile image
Roman Chernyshov • Edited

Weight Flexbox Grid 12Kb

Collapse
 
purplenimbus profile image
Anthony Akpan

Regarding your point about overriding bootstrap.

The key is to override the less files and compile your own style. With that your can leverage just what you need

Collapse
 
rizkimcitra profile image
R. Maulana Citra

Hi, I'm from the future, come here to recommend you a nice, fast and customizable CSS Framework called Tailwind CSS

Collapse
 
kylessg profile image
Kyle Johnson

If you just use the grid part with sass then add as if/ when, then I don’t see why you wouldn’t.

Collapse
 
ashraful profile image
Mohamad Ashraful Islam

Nowadays I don't use bootstrap either. For most of the websites I use Bulma. It is actually awesome in size, components, and responsiveness.

Collapse
 
amorr profile image
amor

I hope that bootstrap-like frameworks can be more modular and load only the parts I need.like require module?

Collapse
 
lexiebkm profile image
Alexander B.K. • Edited

Bootstrap does provide way for importing components individually, using ES6 import syntax such as :
import 'bootstrap/js/dist/button';
import 'bootstrap/js/dist/alert';
import 'bootstrap/js/dist/modal';

If we use React, there are good alternatives for GUI toolkit beside React-Bootstrap in which we can import only components that we will be using :

The components are imported using ES6 module syntax instead of requirejs syntax.

In my current app, I use Bootstrap for most parts, use Antd for its dynamic Tabs component, and Material UI for its Switch component.
The reason I mostly use Bootstrap (React-Bootstrap or Reactstrap) is because it is the 1st library that I knew when I started developing my app.

 
codedgar profile image
codedgar

I wouldn't say nobody, most of the websites, templates and WordPress themes that I've seen use Bootstrap components and override them

Collapse
 
grvpanchal profile image
Gaurav Panchal

Bootstrap can evolve if it can develop a CSS framework for web components. I was hoping to create a PR for such

Collapse
 
gridou profile image
khalil la

How about only using bootstrap-grid it's about 50 KB?

Collapse
 
raqara profile image
Rakara Abila 🇰🇪

I dumped Bootstrap too in favor of UIKit.

Collapse
 
zourite profile image
Sonia SAUGRIN

I use Foundation Zurb - Grid. I don't use Bootstrap.

Collapse
 
walalm profile image
Waldy Almonte

I’m a backend developer but the reasons exposed in this article makes sense to me.

Collapse
 
lilubel profile image
Ana Caliri

frameworks kill design