Bootstrap: You're Doing It Wrong

January 27, 2014January 20, 2016

Bootstrap is a powerful web presentation framework formerly known as Twitter Bootstrap. I want to address some misconceptions about the framework and describe ways people use Bootstrap incorrectly. I will reveal the causes and offer corrections. I do not claim that everyone should use Bootstrap but I believe the majority of sites would benefit from Bootstrap or a similar framework.

Bootstrap came to be in the best way for a framework. It was extracted from a working application and organized for reuse. Bootstrap was extracted from Twitter’s web site for use across all of Twitter’s web UIs. In a similar manner, Ruby on Rails was extracted from Basecamp. Frameworks created in this way are more likely to be useful than those based on theories of best practice.

Bootstrap is not the only option for a front-end web framework, but it is the most popular. I believe that everyone should base their CSS on a framework as their is no point recreating common elements and correcting the common shortcomings in CSS browser support. There are lightweight libraries available which only normalize layout across browsers while others also provide responsive layout across multiple form factors.

It is common to hear that Bootstrap is bloated and limits your options if you adopt it. Another complaint is that Bootstrap tries to be a theme and not just a presentation framework. These attitudes are articulately expressed by my friend Tim G. Thomas in a recent presentation. Please take a moment to watch his talk from 17:23 to 20:05. You should watch the entire talk if you have the time.

My criticisms of Tim’s opinions are not criticisms of Tim. His opinions about Bootstrap are common misconceptions. Here are Tim’s comments along with my evaluation of their accuracy:

Comprehensive – True

Huge, Gargantuan – False

Does absolutely everything for you – False

The goal is to do everything for you – False

You don’t need a designer – False

Everything will be fine and happy; rainbows and Unicorns – False

Good for rapid prototyping only if you never plan to release your code into production – False

Paints you into a corner – False

Difficult to extend on top of it – False

Good for Personal Tools – True

Be aware of its strengths and limitations – True

It does have quite a few limitations – False

There are themes you can download – True

There are people specializing in creating Bootstrap themes – True

This is a “red flag” – False

You can get started with it quickly – True

You have to read through a lot of documentation. – True

Low in efficiency – False

You learn a lot with it but you don’t learn CSS – True

It’s impossible to know exactly what is going on where – False

Not extensible unless you are a professional Bootstrap theme designer – False

I believe Tim’s misunderstanding and that of others like him comes from experience using Bootstrap incorrectly. Here are my recommendations for using Bootstrap correctly:

Learn CSS.
Anyone considering using Bootstrap, or any other web presentation framework, must first learn CSS. This is not optional. If you are building web UIs, you must understand the universally used layout technology. Bootstrap is not meant to teach you CSS. If you paint yourself into a corner using Bootstrap because you do not understand CSS, you are responsible for your situation. Be a professional. Learn your medium. If you use Bootstrap assuming you don’t need to know CSS, it’s not the framework’s fault when things go awry.

Use a CSS meta syntax.
Anyone building web UIs these days, should use a CSS meta syntax. There are two options, LESS and SASS. SASS has two syntaxes, the more modern and recommended syntax is SCSS but I only hear people refer to it as SASS. Pick one, LESS or SASS I do not care which, and use it to generate your static CSS for display. Just do it. You will not regret it. To do otherwise is to waste time, limit productivity and be prone to error.

Use the Bootstrap LESS source code.
Using static CSS is the number one mistake people make when using Bootstrap. Tim says he had the unfortunate job of trying to extend on top of Bootstrap and finally recommended that his client “get rid of the whole thing”. I understand this sentiment. If I did not understand Bootstrap and was told to extend on top of static CSS generated from the framework, I would probably do the same. It is easy to understand what is going on where if you use the LESS source and not static CSS.The Bootstrap team encourages this mistake. They actively encourage users to download the entire framework as static CSS on their home page. To be fair, they also have a link to download the LESS source but I recommend cloning the source from the GitHub repository instead. This way you can easily retrieve and experiment with updates in your own projects.

The Bootstrap development team further exacerbates the issue by providing a “customize and download” form. This form encourages you to generate custom, static CSS. It presents you with options to customize the compiled CSS. On this page, you will see all of the modules available within Bootstrap and you can select any that you want in your project. You will also see the variables available for customization within Bootstrap. There are fields to customize each value. Although the result is still static CSS, these options provide you with the opportunity to counter the assertion that all Bootstrap sites look alike. If you study this page, you can learn a great deal about how to use Bootstrap effectively.

Tim recommends using the full framework with default styling for personal or internal projects. I agree but with the caveat that you use the LESS source to generate your CSS. While a site may begin life as a personal or internal project, these things can grow beyond their initial intentions. Starting with the LESS source keeps your options open with little overhead in taking the site live.

Using the Bootstrap LESS source forces your hand in the choice between LESS and SASS, but if you choose to use Bootstrap, you ipso facto choose LESS as well. I’ve heard that if you have a Rails application, you should use Bootstrap-SASS. This annoys me because there is nothing inherently better about SASS just because the Rails team chose it as the default. The Rails team made Prototype the default JavaScript framework for years after most developers replaced it with jQuery immediately upon creating a new Rails project.

Bootstrap is a LESS project. Use LESS with Bootstrap. There is no advantage to using SASS. The SASS port exists to appease Rails snobs that think the team has some special insight into your application’s requirements when choosing their defaults. The Rails team chooses reasonable defaults, but there is no reason you should stick with them all and I don’t know anyone who does. The use of SASS is no different than any other default that you may replace if your needs benefit from that choice.

Be selective.
You don’t have to use every feature of Bootstrap in your production app. Bootstrap is a buffet. You can certainly use the entire framework with it’s default configuration to quickly generate a UI that handles multiple browsers and formats gracefully. Bootstrap does not do everything for you, but it provides a set of reasonable defaults for you to choose from. Although the framework is comprehensive, you don’t have to use it all or any specific part of it.In addition to the LESS code, bootstrap includes JavaScript components. The JavaScript libraries are a convenience and can be included or excluded as you see fit. The JavaScript libraries are jQuery plugins for common use cases. These plugins work well with Bootstrap styles and elements by default.

Read all of the documentation.
Become familiar with the elements of Bootstrap you choose to use in your site. This is not only true for Bootstrap. You should do this for any framework or library you select for your project.Tim identified the need to read a lot of documentation as a shortcoming of Bootstrap. Why is documentation a shortcoming? Thorough documentation is an asset. The Bootstrap documentation is well organized. It is easy to find the section relevant to your questions.

Study the Bootstrap source.
The bootstrap LESS source is very well organized and easy to read. It is organized into modules of increasing granularity. This is one reason it’s written in LESS. Notice how bootstrap.less simply includes each of the component files. You can follow the includes to see what modules make up each Bootstrap feature. There is no requirement that you include bootstrap.less in your project. You can include only the modules that are suitable for your needs in an a la carte manner. Bootstrap is imminently extensible and customizable.

Avoid looking like a “Bootstrap site”.
A common complaint against Bootstrap is that all Bootstrap sites look alike. It isn’t difficult to make bootstrap distinctive and follow a custom design. On client applications, I include the bootstrap LESS libraries, then my own overrides. I usually grab the LESS from a Bootswatch that approximates the site design, then I begin tweaking from there to meet the designer’s specifications. This allows me to start with overrides from a consistent layout and tweak it to my needs. This pattern has served me and my clients well.

Use a Bootstrap template, if you do not have access to a designer.
Yes, there are people making a living creating custom styles and themes based on Bootstrap. I do not see this as a shortcoming of the framework in any way.I am not a designer. My personal site is built on WordPress with Bootstrap. Because I don’t do web design, I bought a simple design template. After looking at many templates, WordPress themes etc., I chose a template based on bootstrap. I liked it best of all the templates I reviewed and it had the added benefit that I wouldn’t have to convert the styles to use bootstrap. Even so, I’ve made such a conversion before and it wasn’t difficult. I don’t think it looks like a Bootstrap site. It looks sufficiently distinctive for my needs.

The template I purchased was not a WordPress theme so I chose a base WordPress theme that depends on the bootstrap LESS source and allows extensibility through custom LESS. I created a child theme using my custom template. I ripped out all the default Bootstrap styles in the template in order to depend on the bootstrap LESS in the base theme. I ended up with few unique styles and overrides from the template that I purchased and let Bootstrap defaults from the base theme handle the rest.

I made a few overrides of Bootstrap defaults in custom LESS. I had some issues overriding a few defaults. I won’t deny that I made some ugly hacks. It wasn’t worth going any further for my simple blog. If this were a client site, I would have done things cleaner, but I wouldn’t have had to deal with the overhead of WordPress either.

If possible, use a designer.
The Bootstrap website never suggests that you do not need a designer. Bootstrap is not necessarily a “theme” but it can mistakenly be used in that manner. By default, Bootstrap styles default HTML elements in a more pleasing manner than the browser defaults. You should use these default styles only as a starting point and customize them to suit your designer’s specifications.Bootstrap does not limit extensibility. In the past, it was difficult to customize certain elements provided by bootstrap, especially the top bar. The framework has matured and become more configurable with subsequent releases. Although still not flawless in this regard, it is much improved.

Beware that backwards compatibility is not guaranteed.
The team makes this clear. Mistakes are made in any initial design. For example, one criticism of Bootstrap is that the classes aren’t named semantically. By forgoing backwards compatibility, the team is able to correct past design mistakes and keep up as web standards and practices evolve and grow.To protect yourself, clone the LESS source from your version’s release branch into your project. Then you can pull any fixes or updates to that version into your project without suffering from breaking changes such as renaming default styles. When a new version is released, you can try that branch and determine if it is worth the trouble to update your UI to accommodate changes in the new version.

Bootstrap isn’t for everyone or every project. A good library or framework follows the Pareto Principle of meeting 80% of use cases. This is where Bootstrap is most useful. You need to make informed choices when choosing or rejecting a framework. I encourage you to explore Bootstrap following my recommendations. I think you will be pleasantly surprised by the utility and ease of use this rapidly evolving framework provides.

6 comments

Thank you for articulating these points about Bootstrap. It drives me nuts to hear people in our industry bashing the framework for the points you just countered. I take no pride in “reinventing the wheel” on a project every time just to avoid saying I used a framework. That seems like foolish snobbery to me. Bootstrap isn’t perfect, but it’s not that bad either.

EnriqueJanuary 27, 2014

This is the second time I see the advice to use LESS instead of the plain css Bootstrap files. I’ve successfully been able to use Bootstrap on a few clients as static css files, but I think on big projects I’d definitely take you up on your advice and use LESS. It’s also a good excuse to finally learn LESS as well.

Since BT3, the framework lacks only from 3 points:
1.- It has a poor granularity + organization in the code (Sass has a huge library)
2.- Poor support for mixins (even thougth they are there there is no (almost) documentation)
3.- Lack of ambition. Perhaps this is why the other lacks

But the last big update shows that this lacks will be gone any time soon

At the other hand, if I have to choose between ruby and nodejs, I will choose nodejs since I’m a python guy and ruby is too much similar (I like the asynchronicity of node)

I almost took you seriously enough to argue some of the points you make with proper reasoning, but then I read stuff like this:

“I’ve heard that if you have a Rails application, you should use Bootstrap-SASS. This annoys me because there is nothing inherently better about SASS just because the Rails team chose it as the default.”

While you might know LESS, this shows that you have absolutely no clue about Sass. And the conclusion that it somehow must be better “because the Rails team chose it as a default” is a real gem. Are you 8 years old or something? How do you expect anyone to take you seriously after an argument like this?

“Bootstrap is a LESS project. Use LESS with Bootstrap. There is no advantage to using SASS.”

Bootstrap is not a LESS project. It is primarily built with LESS, but there is a very good reason why the main downloads and customization will give you static assets (you consider this a ‘mistake’ also): you need tooling for LESS. One reason why people might choose Sass is the tooling.

Do you know what ‘personal preference’ is, right? It’s why I would never try to force down my opinions stated as facts on others’ throats with your awesome ‘because I said so’ reasoning ever.

But hey, if this is what gets you through the day? As for the increased complexity of a frontend toolchain when you introduce something like LESS or SASS, well …

“The SASS port exists to appease Rails snobs that think the team has some special insight into your application’s requirements when choosing their defaults.”

Man, you really need to do something about this. Rails and the damn snobs who are using it with sass! When they could use it with “Bootstrap with LESS”! Why don’t you contact DHH and pitch him with your reasons above to drop all these stupid defaults they chose in their complete error of judgement?

So, I’m not going to spare any more time on you now: Your checklist of true / false, the rest of your post, your ‘because I said so’ moments are screaming of an overinflated ego and a very narrow field of vision and knowledge of the topic you are talking about.

Maybe only because you were worked up when you wrote this, I don’t know. But next time, before you publish another diatribe like this, recommending everyone to make ‘informed decisions’ about something, please heed your own advice.

Let me know, if you are interested in a real discussion on your original topic, because it could have merit, but not in this style.

Brian HoganJanuary 31, 2014

You had my attention until the angry rant about Sass and “Rails snobs.”

I’ve used Less and Sass both since 2009. Sass has always been better for writing CSS. The fact that Twitter chose Less to build Bootstrap doesn’t make it any better than any other tool. It just happens to be what they used.

Also, there are reasons that Rails uses Sass that go far, far beyond snobbery. Compass is just one of those reasons. But those reasons are irrelevant, as it just happens to be what Rails uses. Someone went out of their way to make open-source software to bridge the gap. That’s a pretty cool thing.

That section of the article seems to be trying to pick a fight for no reason. My advice is to redact those few paragraphs from your article because they distract from the otherwise good post.