A dumpster with the Bootstrap logo placed in it

Why is Bootstrap Still Around?

I was fortunate enough to build websites in the ’90s. CSS was still new, and web pages consisted of a hodgepodge of tables, font tags, and spacer GIFs. I use the word fortunate because I learned that websites that separated design from structure were more manageable.

History is cyclical, though, and the makers of Bootstrap didn’t learn that lesson from the early Web. Instead, they touted the ability to mix design elements into HTML as an advantage. Many developers try to argue that it is.

In this article, I’ll try to convince you that that simply isn’t true. In my opinion, any advantage gained by using Bootstrap is quickly lost in maintenance, performance, learning curve, and uniqueness.

Messy, HTML-based Grids

Until a few years ago, creating a layout in CSS was like trying to fit a cow into a wedding dress — and that’s being kind.

An angry looking cow
Don’t even think about it.

Floats were not intended for layout any more than tables were. It took a long time for the release of proper systems like Flexbox and Grid, and that’s a shame. You could almost forgive the folks at Twitter for creating their own grid system, allowing developers to add simple CSS classes to control the layout of the page.

However, it’s almost 2019, and we do have proper layout systems now. All modern browsers support CSS Grid. IE 10 even supports most of it. There’s really no reason to use Bootstrap’s grids unless you’re supporting a legacy project.

For the sake of comparison, here is some Bootstrap HTML to create a simple 2-column layout with a 4×4 grid in the second column.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-6 mb-3 mb-md-0">
      Left Column
    </div>
    <div class="col-xs-12 col-md-6">
      <div class="row">
        <div class="col">Grid Cell 1</div>
        <div class="col">Grid Cell 2</div>
        <div class="w-100"><!-- Row break --></div>
        <div class="col">Grid Cell 3</div>
        <div class="col">Grid Cell 4</div>
      </div>
    </div>
  </div>
</div>

And, here’s the same markup rewritten with better HTML.

<div class="author">
  <div class="author-bio">
    Left Column
  </div>
  <div class="author-books">
    <div class="author-book">Grid Cell 1</div>
    <div class="author-book">Grid Cell 2</div>
    <div class="author-book">Grid Cell 3</div>
    <div class="author-book">Grid Cell 4</div>
  </div>
</div>

In the clean HTML, you can probably guess from just the class names what the content is about. It is easier to maintain and is reusable, as it can be a pattern for use on other pages. You can style both the Bootstrap HTML and the clean HTML to look exactly the same, so why would anyone choose to clutter it up with Bootstrap’s classes?

Bootstrap HTML is bad as it is, but add React, Angular, or just about any other framework, and you’ll be reminiscing about those simpler days debugging nested tables without built-in browser developer tools.

Speaking of other frameworks, Bootstrap…

Doesn’t Play Well with Others

We live in a world now where websites and applications are very complex. They depend on numerous third-party scripts and styles. Bootstrap, however, pretends that it’s the be-all, end-all framework. It makes opinionated changes to your site that often have adverse effects.

For example, Bootstrap sets the box-sizing property to border-box for all HTML elements. If you aren’t familiar with this property, it has to do with how width and height are calculated when an element contains padding or borders. By default, browsers add padding and borders to the outside of an element. Let’s say an element is 100 px wide and has 20 px of padding and 5 px of border width. Its total width will be 150 px (100 + 20 + 20 + 5 + 5). Many designers were dissatisfied, so the box-sizing property was created to give them more control over how dimensions were calculated. With the border-box value, an element with a width of 100 px will be 100 px regardless of how much padding or border is added.

To many, this sounds like a common sense approach, but both methods have advantages and disadvantages (perhaps the subject of another article). The point is that Bootstrap made the decision to force the border-box model on you instead of giving you and other libraries the choice.

An angry cat with a Bootstrap logo on its collar and text beside it: I'm the only framework you'll ever need

Just as Complex as CSS Grid

Bootstrap’s original grid system was fairly simple. You had an element that acted as a row and child elements that acted as columns. Class names determined the widths of the columns with numbers that, when combined, added up to twelve.

Bootstrap still follows this basic structure, but now we have responsive classes (col-md-4), display classes (d-flex), and even classes for widths, margins, borders, and many more  (ml-4, text-uppercase, border-top-right-0). At some point, you have to ask yourself why you’re learning two design systems instead of CSS alone?

Maybe you think that Flexbox and CSS Grid are confusing, and you use Bootstrap because it’s familiar. Unfortunately, you’re not doing yourself any favors by using Bootstrap as a crutch. Bootstrap’s grids will eventually go away. We’re already seeing this happen with jQuery.

When JavaScript wasn’t meeting developer’s needs, jQuery came along and filled the gaps. Now that nearly all of jQuery’s features have been included in JS in some fashion, it is slowly heading into obscurity. The same will inevitably happen to Bootstrap, and you should be prepared.

Bootstrap is Bloated

Bloated frameworks are nothing new, and Bootstrap isn’t so bad in comparison to some, but I’ll continue to call it out because it’s important. You will not use all of Bootstrap’s CSS, scripts, and components in your project.  Bootstrap has so much going on that you are guaranteed to only use a portion of it. True, you can customize Bootstrap to only include a subset of features, but take a look at its Downloads page. The vast majority of sites built with Bootstrap include all of Bootstrap.

It includes nearly 10,000 lines of CSS in the unminified file with thousands of rules devoted to class names that map directly to CSS values, like this:

.ml-md-0,
.mx-md-0 {
  margin-left: 0 !important;
}
.m-md-1 {
  margin: 0.25rem !important;
}
.mt-md-1,
.my-md-1 {
  margin-top: 0.25rem !important;
}
.mr-md-1,
.mx-md-1 {
  margin-right: 0.25rem !important;
}
.mb-md-1,
.my-md-1 {
  margin-bottom: 0.25rem !important;
}
.ml-md-1,
.mx-md-1 {
  margin-left: 0.25rem !important;
}
.m-md-2 {
  margin: 0.5rem !important;
}
.mt-md-2,
.my-md-2 {
  margin-top: 0.5rem !important;
}
.mr-md-2,
.mx-md-2 {
  margin-right: 0.5rem !important;
}
.mb-md-2,
.my-md-2 {
  margin-bottom: 0.5rem !important;
}
.ml-md-2,
.mx-md-2 {
  margin-left: 0.5rem !important;
}
.m-md-3 {
  margin: 1rem !important;
}
.mt-md-3,
.my-md-3 {
  margin-top: 1rem !important;
}

And that’s not even all of the margin classes for a single media query breakpoint. The !important declarations alone make me cringe. If you wouldn’t write CSS like this yourself, you shouldn’t be including a framework that does either.

Fun fact: Did you know that there’s a blockquote-reverse class? Do you know what it does? Doesn’t matter. Someone removed it from the Bootstrap 4 codebase and never bothered to tell anyone. If you plan on using an uncommon Bootstrap class, be careful. It might not be there later.

Encourages Poor Accessibility

Writing accessible HTML involves a great deal of knowledge. It’s not as simple as adding alt text to images. Take a look at the WCAG 2.0 Quick Reference to see just how complex it can be — and that’s a quick reference!

So how does Bootstrap encourage bad accessibility? Here are a few examples from their documentation:

I do appreciate that the Bootstrap developers are making attempts at promoting accessibility with notes about their sr-only class and ARIA attributes. However, many of their examples still encourage bad practices, and I see them copied and pasted into production environments. Bootstrap’s own home page has 34 accessibility issues identified by axe at this moment.

Generic, Overused Design Patterns

If you’re creating a quick prototype for a web app and you want to use Bootstrap to shave time off the design work, that makes perfect sense. Far too often, though, developers use Bootstrap for the final product, and the Web has become filled with Bootstrap clone sites. If your content is important enough to be on the Internet, it should be well designed and stand out from the sea of framework-based websites.

Bootstrap sites are like school uniforms. They’re great for showing solidarity and conformity but not something you’d want to show off to your friends. When you consider your next web project, I hope you’ll leave Bootstrap out of it. Make your project something unique — something you’ll be proud to show off.

Note: The views and opinions in this article are those of the author and may not necessarily reflect those of Experis and its affiliates.

Leave a Reply

Your email address will not be published. Required fields are marked *