You Don't Need Bootstrap (2024)

It will come to no surprise to anybody who has heard me speak that I am no friend to Bootstrap. One of my goals with the trainings that Four Kitchens does for Responsive Web Design at various Drupal events and for companies, is to give developers the tools they need to not using Bootstrap or other similar tools. I hope to clear up why I feel that Bootstrap is the wrong tool for most websites, and what you can use instead of it.

1. Anti-patterns

First off, Bootstrap supports far too many anti-patterns. An anti-pattern is a design idea that seem good, is reproduced often, but generally are bad ideas for a website. First off, Bootstrap does not give you a truly responsive design. It supports the idea that there should be 4 breakpoints based off of the idea that we are building websites to phones, tablets and desktops. This is contrary to the idea of designing and building a site based upon content, and ensuring the site is usable, no matter the device that views it. A good example on how devices do not fit into such discrete categories is the Samsung Galaxy Mega, which is either a large smartphone, or a small tablet. The design should work with such a device, even though it is not specifically a tablet or smartphone.

This is a problem in general with class-based grid systems as well, that we are limiting ourselves. Grids should work with the content itself, not impose a class structure. We should not limit ourselves to a 12 column layout with four breakpoints.Instead, let’s design our sites around the content, creating awesome mobile-first layouts. In short: We deserve better.

2. You should use YOUR design

Bootstrap sites all look the same, and all have the same front end code that is applied. Even the themes will apply a lot of styling that you might not need. But for your site, you should have as little CSS as possible to create YOUR design. Why should you be overriding something, when you can just use your own code from the beginning?

3. Better markup

I hate having excess classes, and non-semantic classes littering my markup. I want my site to be clean, easy to read, and have as little interference as possible when I am creating markup. Besides my desire for clean markup, there are also practical reasons for not wanting this class-based system. Many CMSs, Drupal included, have their own opinion and method for printing out markup and classes and having to put Bootstrap classes throughout the markup is very difficult. Yes, it can be done, and yes, there are ways of doing it. But, it will take far more time and energy than just creating your own custom CSS from the beginning.

4. Sass makes it possible

This is the point in my arguments that I usually get the reaction of, “Yes, but I need to make quick prototypes, and I do not have the time to create custom CSS from day 1.” This was true, before the Sass community started making pluggable extensions to Compass to allow quick and easy prototypes to be made with 100% custom code. Not only can you do this with custom code, but you are writing production-ready code from day 1 with your prototype. Team Sass has done a large amount of work to allow custom grids, media queries, and styling incredibly easy. You can do it, and these tools will make it possible.

What Bootstrap is good for

I highly recommend not using Bootstrap, and would never advocate its use on a live site. That being said, it is not all bad, and has been made by a team of amazing engineers and designers to give some great ideas to the world. First off, it is a good way to learn, and see how some interesting styling and JavaScript can be used. If you are new to front end work, or want to see how responsive web design works at a fundamental level, check out the code. It is a great way of learning how fundamentally some of these front end examples work. Also, if you are building a back end administration page, that is only used internally, Bootstrap is a great tool to give you interesting UI pieces without having to do a full design. As this code will not need to be perfectly performant, and will not matter if its design steals from other UI elements, use Bootstrap.

Wrap up

Do not use Bootstrap. No, really don’t. You can do better, you can design better, and you can build your code better. Using a CSS preprocessor like Sass will allow you to still have the rapid prototyping you need, and the community tools within Sass will be your bread and butter in this regard.

FAQs

Why you don't need Bootstrap? ›

While Bootstrap is easy to use, it's not so easy to customize as you might think. Some components will require you to use ! important several times, which is not ideal when creating CSS. And having to override the default styles of Bootstrap is just like having to create your own CSS from start.

Find Out More ›

Do you need to use Bootstrap? ›

Since Bootstrap makes it easier and faster to create responsive websites, it appeals to many front-end developers and beginners in particular. However, it's not recommended by all.

Is Bootstrap still relevant in 2023? ›

As of 2023, Bootstrap is still widely used and is a valuable skill to have as a web developer. Bootstrap provides pre-built CSS and JavaScript components that can be easily customized and integrated into your web projects.

Learn More Now ›

Why is bootstrapping risky? ›

The most obvious risk with bootstrapping is putting your own money directly into the company. When your business takes a hit, whether due to lack of sales or an unexpected expense, it will impact you directly.

Learn More Now ›

Can we replace CSS for Bootstrap? ›

css file. At any time, you can edit or remove any of your custom CSS to revert to Bootstrap's default styles or redesign your site. You can also easily switch to another version of Bootstrap (as long as it's a minor release, like 4.4) by replacing the reference to the previous stylesheet in your index. html file.

Get More Info ›

Should I learn Bootstrap or react? ›

Bootstrap vs React Comparison at a Glance. While React is known for enhancing user experience by loading web pages faster, Bootstrap helps to build mobile-friendly websites, CSS designing, HTML layouts, and JavaScript functions perform well.

Find Out More ›

Why is pure CSS better than Bootstrap? ›

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web; Pure: A set of small, responsive CSS modules that you can use in every web project. Pure is meant to be a starting point for every website or web app.

Find Out More ›

Should I put Bootstrap on resume? ›

Yes, Because Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. Who can help me create a standout resume?

Know More ›

Is Bootstrap considered a skill? ›

Bootstrap is a valuable skill to have as a Front-End Engineer. The best part about Bootstrap is that it builds on other front-end development skills such as CSS, HTML, and JavaScript. In fact, you can learn Bootstrap with our courses in just a few hours and start building your first Bootstrap website in no time at all.

Discover More ›

Why do people still use Bootstrap? ›

And even today many developers use bootstrap for their projects. Bootstrap provides a very attractive frontend, and makes it easier to write the css part of a website with less amount of code. Also while using bootstrap you dont have to worry about responsives of the web pages much.

Get More Info ›

Should I learn Bootstrap or Sass? ›

"Responsiveness", "UI components" and "Consistent" are the key factors why developers consider Bootstrap; whereas "Variables", "Mixins" and "Nested rules" are the primary reasons why Sass is favored.

Explore More ›

Do Web designers use Bootstrap? ›

Bootstrap is one of the most popular frameworks for building websites and web apps. It is a great tool for web developers and designers because it: Speeds up development. Makes responsive design easier and more consistent.

Know More ›

What percentage of websites use Bootstrap? ›

Bootstrap has market share of 12.30% in programming-framework market. Bootstrap competes with 84 competitor tools in programming-framework category.

Is it difficult to learn Bootstrap? ›

Experience. At first glance, Bootstrap seems quite simple. And indeed, it is not difficult to start using Bootstrap. There is a very well written Bootstrap documentation with many HTML, CSS, and JavaScript code examples.

Keep Reading ›

Why is tailwind better than Bootstrap? ›

About which framework is better depends on situation and the need of your project. If your project contains more of backend work and requires common layouts, then Bootstrap will be better. While if your project requires exclusive customization and front-end work, then Tailwind CSS will be better.

Get More Info ›

Which is better HTML or Bootstrap? ›

Bootstrap and HTML5 are primarily classified as "Front-End Frameworks" and "Languages" tools respectively. "Responsiveness", "UI components" and "Consistent" are the key factors why developers consider Bootstrap; whereas "New doctype", "Local storage" and "Canvas" are the primary reasons why HTML5 is favored.

Should I learn Bootstrap after CSS? ›

Bootstrap's syntax is straightforward and easy to understand, and its documentation is well-written and comprehensive. If you are already familiar with HTML and CSS, you should be able to learn Bootstrap fairly quickly, especially if you are comfortable with the basics of web design and development.

See Details ›

Why React over Bootstrap? ›

Bootstrap is a CSS framework that improves responsiveness. React is a JavaScript library and is used to improve UI. Bootstrap is based on the CSS grid system, the CSS flexbox, to improve responsiveness. React is based on pure vanillaJS to improve the UI and client-side experience.

Read On ›

Is React js better than Bootstrap? ›

Sometimes developers prefer to avoid this framework due to its vast library and unutilized resources, which leads to slower performance. The performance of React apps is faster and better than Bootstrap, a lightweight performance in user experience with individual components working in an exemplary functional manner.

What are the disadvantages of Bootstrap in React? ›

However, one downside of React-Bootstrap is that it can be challenging to customize the components. If you want to change the look or behavior of an element, you may need to write some CSS or JavaScript yourself.

Explore More ›