Bootstrap's Biggest Problem: Missing Style Guide

I have always been a big fan of Bootstrap, but one thing has been bothering me.

Bootstrap is great for UI implementation. The fourth version of the framework clearly confirmed that due to the sophistication and ability to focus on things that matter, Bootstrap rules the world of UI frameworks.

Bootstrap is great for implementing web application interfaces such as intranets or content management systems. But when it comes to presentational sites, the use of Bootstrap is below its capabilities or quickly becomes meaningless.

I sometimes take a look at Bootstrap driven sites. You can do it too – there is e.g. Bootstrap Expo - a showcase of sites built on the most popular front-end framework.

Let’s go through those sites.

It’s a gallery of beautiful and creative websites that use… well… just the layout grid and Bootstrap buttons.

Yes, I’m not kidding – they mostly do not make use of more components from Bootstrap.

Presentation sites: The unlocked potential of Bootstrap

The above-mentioned sites also exist here in the Czech Republic. When I’m asking their authors why they used Bootstrap when they only need its layout grid, their answer is:

It was the client’s wish.

It’s true – it is popular among clients to fall for an illusion that using Bootstrap will save the budget. However, if the custom design of the project is not adapted to the design system (hidden in Bootstrap), the use of the framework is very inefficient.

Bootstrap really has a potential to be used on websites, however, I never hear that one correct reason to do so. It would go something like this:

From all existing design systems, Bootstrap was the best choice. We discussed it with the designer, changed a few things in Bootstrap’s design system and we use a large part of the framework components.

The reason why I will never hear such a reason is hidden in the following fictional quotes:

• Bootstrap’s design system is invisible. There is no public documentation. It can only be noticed by more experienced and design-savvy developers. It is partly hidden in the code and partly does not exists.
• Designers do not see the system. They can’t learn the graphics principles on which Bootstrap is built. There is no documentation which could suggest a sensitive way to edit design principles for a specific project. The adjustments designers then make are sometimes missing the Bootstrap principles. They misunderstand Bootstrap.

What does the red button mean?

To make clear what I mean by using the term design system, let’s take a look at the following modal window built using Bootstrap.

Now tell me: What’s wrong with the design of the user interface?

I’ll let you think…

Just a bit more…

Now, please think it over. The “Close” button has the wrong color, right? And why? Because the red (created by the .btn-danger class) is designed for risky operations that can, for example, erase data for the user. It was not created for closing the window, which has lower priority than “Save changes”.

Probably.

I say “probably” because we don’t know where the truth is. Bootstrap has no documentation of the meaning of color, as well as no documentation of the meaning of anything. No button page or anything like it.

Bootstrap does not have a design system documentation. It does not have a style guide. So there is no order in Bootstrap’s design – not for designers and not for most developers.

If you take a look at the map of the web tools for designers and developers, it simply occupies the place for the UI library:

Now let’s compare Bootstrap with Material Design

New to Bootstrap’s segment was Google Material Design. If we’d like to implement a button using Material Design, we will learn, for example, that there is a priority scale:

Other important information is that the location of a button, its shape, color, or location affects the position in the hierarchy:

Yes, besides being a UI library, Material Design is a well-documented design system:

So, if a designer works with Material Design, he is ready to design a web interface based just on this framework. Then a developer can easily implement it.

If a developer works with Material Design (and reads the documentation), then he will make much less designing errors.

This is the strength of Material Design and the weakness of Bootstrap.

Bootstrap has better technical documentation, but the style guide is missing

I’m far away from something like “run away from Bootstrap and let’s use Material Design now”.

Material Design has its own problems. The technical documentation of the Bootstrap buttons is exhausting. There are, for example, the following information:

• All modifications including code samples
• Possibilities of using different HTML tags
• Accessibility aspects
• Warning about browser problems
• Javascript API documentation

…and much more. The technical documentation of Material Design is basic and insufficient.

If I make things much simpler than they actually are, Material Design may be more interesting for teams where designers collaborate with developers on a product. Bootstrap, on the other hand, can be more suitable for solitary developers who are working on both the UI design and its implementation. They will really appreciate the detailed technical documentation.

Bootstrap 4 is simply the most sophisticated UI library for the web, however, it lacks the style guide and documentation of the design system.