Limitations of Twitter Bootstrap

Pierre Fritsch
Pierre Fritsch, 9. Januar 2013

A great tool…

You sure have heard about this powerful tool called Bootstrap. The twitter team created and published this frontend framework to make beautiful and ergonomic web apps in a few steps.

Go to http://twitter.github.com/bootstrap/, configure your variables, choose components, copy paste markup snippets… and that’s it! You made a cool interface that runs in every browser. While it offers great value, it also has severe drawbacks.

…but a bad standard

At the beginning, Bootstrap was just a style guide for Twitter internal tools. Just by looking at the list of projects based on it and at how many tools have emerged around it, we understand that Bootstrap becomes a reference, a model of best practices in frontend development. The point is that it tends to be a standard framework.

Its broad use has made it inevitable. But this is not a good enough reason to choose it. Don’t forget to ask yourself some questions before you dive in.

Do you want a clean separation between content and presentation?

The system uses a lot of (too much?) class names, which are concerned with presentation rather than semantics.

Grid system

For example, the grid system uses „.row“ and „.span“ classes to define the layout.

<div class="row">
  <div id="article" class="span8">...</div>
  <div id="aside" class="span4">...</div>
</div>

The same result, could be achieved with a CSS preprocessor e.g. Less, which bootstrap uses, or Sass.

/* HTML */
<article>...</article>
<aside>...</aside>
/* LESS */
article { .column(8); }
aside { .column(4); }

Here we used The Semantic Grid System.

Buttons

Buttons have too much class names:

<button class="btn btn-large btn-primary" type="button">Large button</button>

Do you want a genuine design?

Bootstrap is a good example of what can be done by creating a Style Guide. It helps developers and designers working together, it’s well done and well documented. But it’s not a general framework, here the design is already done, it’s the Twitter look.

Designing a genuine interface is more than changing a background or button color. Even if you can customize a lot of parameters (fonts, colors, etc.), you have to overwrite or rewrite a big part of the css code. By overwriting, you increase the file size considerably. By rewriting, you cannot update the framework easily.

For example, here is the default pagination style:

Default pagination style

To obtain the following result, you need to redefine a lot of css selectors:

New pagination style

.pagination ul {
  border-radius: 0px;
  box-shadow: none;
}

.pagination ul > li > a,
.pagination ul > li > span {
  padding: 8px 16px;
  line-height: 1em;
  text-decoration: underline;
  background-color: none;
  border-top: none;
  border-bottom: none;
}

.pagination ul > li > a:hover,
.pagination ul > .active > a,
.pagination ul > .active > span {
  background-color: transparent;
  color: black;
}

.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

Imagine a complete redesign…

Does non-semantic markup annoy you?

One strength of bootstrap is its extensive set of components (navbar, tabs, alerts…). But each component comes with a lot of questionable markup:

  • Wrapping forms with divs (control-groupers and controls) has no other purpose than presenting forms horizontally, nothing semantic here.
    <form class="form-horizontal">
      <div class="control-group">
        <label for="inputEmail">Email</label>
          <div class="controls">
            <input type="password" id="inputPassword" placeholder="Password">
    ...
    

    Why not use a fieldset tag for grouping related elements and wrapping them with a unique div?

    <form class="form-horizontal">
      <fieldset>
        <div class="control-wrapper">
          <label for="inputEmail">Email</label>
            <input type="password" id="inputPassword" placeholder="Password">
    ...
    
  • Using i tag for icons…
    <i class="icon-search"></i>
    

Does i mean icon? No, it should represent a span of text in an alternate voice or mood. It’s convenient but basically wrong.

Conclusion

There are other questions to consider: does Bootstrap handle responsive well? What about performance? Accessibility? Bootstrap is not perfect and it doesn’t have to be. If you are aware of its limitations, it can be very helpful.

The error would be to use Bootstrap as a default framework for all projects.