Do you want to get on the design hype train? Get our free Ebook about product design.
We use cookies on our website, hope you don’t mind. Just imagine a plate of delicious meringues, they look like clouds. Read more

Development

Why You Should Stop Misusing Bootstrap

Share this Article on:

Stay in touch. Subscribe to our Newsletter

When starting a new project at 10Clouds, there is always a need to find an appropriate way to scaffold the front end, which usually means choosing the framework. In my opinion, a common mistake is to use Twitter Bootstrap as a base for almost every project. Why?

Bootstrap has a lot of advantages, but you need to be very careful when making a decision about the scaffolding tool for your app. For some reasons, people often treat Bootstrap as a Swiss army knife but aren’t aware of some misconceptions about the framework. Here is a short explanation:

Bootstrap was never meant to be used as a website development framework per se.

The thing is that Bootstrap was built at Twitter, so that the developers could work faster by using a standardized interface to present their creations. Then what are the reasons behind that Bootstrap is so commonly used, and is this always so beneficial for the individual projects?

1. It’s popular

Bootstrap is now the most popular front-end framework. The statistics report that until today it has generated 50,517 questions on Stack Overflow and 86,178 stars on GitHub. Quite a few, huh? In comparison, ZURB’s Foundation can boast of “only” 3,403 Stack Overflow questions and 20,831 GitHub stars. The numbers clearly show that Bootstrap has built itself a strong and widespread community of developers.

Developers admit that Bootstrap’s popularity is one of the prevalent arguments when choosing a front-end framework, because it gives us a kind of confidence. The larger the community, the better support and less effort in solving problems.

I completely understand this point of view. I suppose almost nobody would choose anything niche or experimental for a project that demands huge responsibility or has to be completed in a very limited time span. Moreover, Bootstrap can also be very helpful in less demanding (at least from designer’s point of view) cases, like admin panels or apps for internal use only.

Sometimes it happens that we don’t have any CSS ninja in our team, the graphic designer has gone to the Caribbean or even worse, they’re both absent. In such cases Bootstrap appears as a life-saver. But, wait, aren’t there any similar, good-equipped frameworks with convenient skinning options, which might be helpful?

2. I can set up my project quickly and painlessly

As a front-end dev, with every project I’m working on, I need to provide completely different layouts and styles for every design. The graphic designer’s creativity doesn’t like to be limited, so for me it’s super important that the CSS framework I’m using can be easily customized. Also, here comes the compromise between code maintainability and short scaffolding time.

Preprocessors have given us the power of customization. In versions for LESS or Sass, Bootstrap comes with variables and mixins, and allows us to import only the styling components that we actually need. Unfortunately, it’s not the most optimal solution. The process of customization is often not limited to changing the variables’ values in LESSSass file. The common problem is resetting the box-shadow of form inputs. To make it work properly:

  • First, I need to @import  Bootstrap variables and @import  a file with my custom variable overrides (I do this to make it clear, which ones exactly are overridden and avoid conflicts).
  • The next step is importing the forms.scss  file from bootstrap core and my own forms.scss file, which includes only the code essential for customization:
.form-control {
     @include box-shadow(none);
     @include border-radius(0);
   }

We must include the file forms.scss  (from Bootstrap core files), even if it comes with classes and selectors we won’t ever use in our project. This, multiplied by another few imported components, will result in too heavy code.

In contrary, the Bootstrap’s counterpart, Foundation, has slightly better approach for customization. For every UI element, it provides us with mixins which will be imported and compiled only when we need to use this particular piece of code. This also sets us free from the framework’s class naming convention. Before choosing the right option, consider all main differences between Bootstrap and Foundation.

3. I don’t want to reinvent the wheel

Every framework’s purpose is to deliver a bunch of ready-to-go solutions for common problems: typography, the grid, cross-browser and cross-device support, responsiveness, etc. Not only for styling problems, we usually also need some plugins for creating widgets like calendars, dropdown menus and so on. If Bootstrap equips us with all of that stuff, why not take the benefit?

Like in all cases, you should definitely consider all pros and cons of making use of fully equipped framework. Time spent on customization, performance issues and overall size of code – all of this should matter. Then, you may need something really lightweight, that delivers just a responsive grid and almost nothing more (Pure CSS is an example).

4. I don’t have enough knowledge about CSS good practices

If you care about code maintainability and carefully plan your CSS, you should definitely reconsider using Bootstrap in your project. That’s because:

Bootstrap selectors are hard to override. Just look at this:

.navbar-default .navbar-nav > .active > a {}

I bet it’s possible to apply the same styling in a simpler way, without tight-coupling styles with markup and so much specificity.

It uses its own naming convention. If you want to use your own (or BEM, SMACSS, or any other known convention), they may be difficult or impossible to combine. Sass’ @extend  may come here as a solution (LESS also has its counterpart, &:extend() ), or even using Bootstrap mixins. See an example:

<!-- Non-semantically styled markup -->
  <div class="row">
      <div class="col-sm-8"></div>
      <div class="col-sm-4"></div>
  </div>

  <!-- Semantically styled markup -->
  <div class="article-container">
      <article class="main-article"></article>
      <aside class="advertising"></aside>
  </div>
/* Styling solution: semantic class names */
  .article-container {
      .makeRow();
  }

  .main-article {
      @extend .col-sm-6;
      color: red;
  }

  .advertising {
      @extend .col-sm-4;
      color: gray;
  }

Using @extend  in your code can be risky, so it’s definitely worth considering at the moment, when you are setting up your project.

As already shown above, Bootstrap class names are often unsemantic. Of course you can be a pragmatic front-end ninja and accept the compromise between time/code efficiency and semantics. It always depends on your goals and the project’s limits.

Updating Bootstrap, when its classes are entangled in HTML, is a pain.

5. Are there any alternatives?

Of course, there are! But remember that every framework was crafted for slightly different purposes and has its very own specifics. Here is a short list of most popular solutions:

  • ZURB Foundation – its name is quite self-explanatory, because the main purpose of Foundation was to provide just a foundation to build upon a project. Therefore it’s so flexible and customizable – as little overriding styles as possible!
  • Pure CSS – a tiny (4KB minified and gzipped) library that ships you with the minimal amount of components to build a responsive app.
  • Susy – a flexible tool that allows you to create responsive and semantic grid systems.
  • Compass – it’s a tool library for Sass.
  • Bourbon – a simple mixin library for Sass.

If you have experience with any framework or tool, that can be added to this list, share it in the comments!

In conclusion: remember, Bootstrap was originally meant to be a tool for rapid prototyping and wireframing, so using it as a full-fledged front-end framework may turn out inappropriate for your specific purpose. Ask yourself a question, is it worth to use something which solves all most common problems and allows you to quickly set up and develop a project, but pay the price of unsemantic, hard to maintain and often messy code? I strongly recommend using the right tool for the right purpose!

by Marta Sztybor, Front-end Developer
  • Plastic_Eyeballs

    classic marta

  • Plastic_Eyeballs

    marta, are you single?

    • boglet

      get yer brain out of yer dick. A well reasoned, well written article, why does anyone need that kind of attention?

      Would you have asked a man the same question? – Why not?

  • Adam Baxter

    http://www.picnicss.com/ might be one to look at but I haven’t had a chance to dive in yet.

    • Hello Adam, thanks for the link, I’ll definitely take a closer look at picnicss. I’ve recently also tried http://www.basscss.com/ and http://tachyons.io/ (they weren’t mentioned in the blogpost) – really lightweight, but I think they’d fit well especially for small projects.

    • fred k

      this does look cool as well

  • Cole Busby

    I’ve recently had to abandon a shipping interface in that I had originally written in bootstrap. However after careful thought and deliberation I scraped the first interface, it was clunky, ugly and poorly optimized for smaller screens. The first version relied on bootstrap. This iteration the succeeded bootstrap was written with Foundation which was extremely easier to setup and drop in the “tacked on” elements of the project. It really showed me that bootstrap has its place, but not EVERYTHING has to use it.

    • Hi Cole! Yeah, that was exactly my point – use the right tool for the right job. I think it’s also important to have in mind the CSS framework choice in the design phase. It may help to reduce the amount of iterations 🙂

  • mrbrockpeters

    Honestly who cares if Bootstrap is insanely popular? That doesn’t it make it bad. I wish the ZURB foundation lovers would get it. There’s always a goto CSS framework that people will fall back on when they’re not overtly concerned with CSS design but want something to look decent. Before Bootstrap it was the Blueprint CSS framework for me.

    Just like “Gimme Shelter” isn’t a bad song simply because it’s a top 40 classic Rolling Stones song. Most people i know who use it admit it isn’t perfect but it lets you crank out something decent pretty quickly. For back-end developers, like me, especially who are more concerned with scaffolding and wanting to put out something that works as a first iteration Bootstrap is a boon. Yes, I agree, at some point things should start to have their own distinct styles so we don’t all end up with Bootstrap-looking sites, and that’s usually where I defer to a more skilled CSS developer in my process. But for non-public facing web apps or admin sites it’s an excellent choice.

    It’s actually good that Bootstrap is so popular because at least we all agree on a fallback CSS framework and many eyeballs are checking it for bugs all the time.

    It all really depends on what you truly need to accomplish and if you just want to prototype something quickly then Bootstrap is a pretty good start.

    • martinczerwi

      You’ve actually pretty much recited this blog post. Thanks anyways.

      • mrbrockpeters

        You’re welcome morty.

    • Hi mrbrockpeters! Thanks for your opinion. This post was meant to be polemic, but I don’t feel like a CSS guru and just felt to write some points related to my experience ;-). I experienced some problems when developing projects using Bootstrap, so I thought I’d share my insights with other developers – because that may be helpful for people who are hesitating. My main point was to show that Bootstrap may not be a best fit in all cases (use the right tool for the right job!).

      Exactly as you said, I pointed out that “(…) Bootstrap can also be very helpful in less demanding (at least from designer’s point of view) cases, like admin panels or apps for internal use only.” – I think that we pretty much agree 🙂

  • ahallock

    Suit CSS also provides a good base and is more lightweight: https://suitcss.github.io/

    • Thanks ahallock, I’ve heard of suitcss, but haven’t got the chance yet to get familiar with it. It looks clean and will be a good fit for anyone who likes the SUIT naming convention!

  • Leonardo Nicolas

    Do you know Semantic UI ( http://semantic-ui.com/ )? It is an excellent alternative to Bootstrap.

    • Thanks Leonardo, I’ve only heard about it but I see it’s worth attention!

  • Ray Brown

    I don’t currently use Bootstrap, but I’ve worked extensively with Bootstrap 3 and a little with the Bootstrap 4 alpha. Some of your pain points can be solved by using the Sass version of the Bootstrap 3 framework. My approach is usually something like this:

    * Add `bootstrap-sass` via Gem or Bower packages.
    * Set the default Bootstrap variables that need to be overwritten
    * Import Bootstrap’s variables file. They assign Sass variables using the `!default` modifier, which allows you to override each variable before including the file.
    * Import the Bootstrap source Sass files – but only the ones that are desired. Don’t want Bootstrap form styles? Simply don’t import them.
    * Import application styles after the custom Bootstrap setup. There may be a small amount of overriding that you’ll have to do, depending on the use case, but it’s a drastic amount less than what most people are used to.

    Some of your complaints are valid. The CSS selector specificity gets pretty intense with Bootstrap, but the team is making a lot of improvements with Bootstrap 4. Bootstrap 4 also moves away from the `.col-sm-6` grid markup in favor of Sass mixins that generate grid markup more semantically. It’s definitely worth checking out, and I think they did a great job of ensuring that Bootstrap stays relevant while also improving the codebase significantly.

    Lastly, any framework you use will have its limits and quirks. One must understand the limits, how to work around them, and _whether it makes sense_ to work around them. Bootstrap is no different!

    • Hello Ray, We’ve tried very similiar workflow as yours. And the last step (with importing our custom styles) was quite troublesome for me, because of, surprise, overriding selectors 🙂 I totally agree that we always should be aware of limitations of tools that we use, that was my main point. After consideration I think that I should’ve stress it out more!

      I’ve recently played around with Bootstrap 4 alpha (but after the release of this article) and I really like the improvements. Especially the one you mentioned (with grid mixins, but it also has its pitfalls, I think) and rems.

      • I too use this workflow, and even wrote about it after reading your post:

        https://www.yukei.net/2015/11/using-bootstrap-the-right-way/

        It’s true that selector specificity can be hard to override on some components, specially on nav bars, but all in all it’s a much better way to use Bootstrap.

        By the way, you already can use grid mixins, with either the LESS or SASS version of Bootstrap 3: http://getbootstrap.com/css/#grid-less

        • Thanks Felipe, your article is very informative 🙂

          I mentioned the mixin way to create semantic grids in my article, there is also option with Sass `@extend`, but both approaches have their disadvantages. Using mixins cause repetition of code, using extend creates long selectors, can increase filesize, etc. That’s why if we want to stick tightly with semantics, we must be very careful about our CSS. It’s a debatable topic, and I still don’t feel like an expert of that 🙂

          I totally agree with the modular approach for any framework and using only this much code as you need!

  • fred k

    I like materializecss.com good article thank you for this

    • Hi fred, I still don’t feel quite good at material design. What are the pros of materializecss in your opinion?

  • .

    This blog post is presented on a page that was built with Bootstrap.

    • Hi, here I presented only my personal opinion (and I still think that Bootstrap has its advantages!). And we’re still working on our webpage to make it more awesome!

  • Marta, my fav fav fav fav is the sass mixin grid framework called “Neat” by thoughtbot.

  • I’m tired of “front end shame”. First it was jquery. Now bootstrap. I use these tools routinely and they have never caused me an ounce of trouble.

    • Hi John, I’ve never meant to cause any shame 🙂 I just wanted to show my opinion and insights, the main point was to encourage folks to use the tools that best fit their needs, not only being suggested by their popularity.

      But, good point, this is probably a lesson learned for me – be more balanced in expresing my opinions.

  • Tim

    “…Foundation, has slightly better approach for customization. For every UI element, it provides us with mixins which will be imported and compiled only when we need to use this particular piece of code.”

    I have no idea what you mean by this. Having used Foundation for years now, I’d say it’s the exact opposite.

    For example, Foundation adds box-sizing:border-box (the IE5 box model) to “*” (everything). That is, even if you don’t “mix” anything “in”, it messes up the layout of every element on the page! Good luck getting that to work with any other third-party components.

    This is doubly pointless after Foundation switched to jQuery 2, which only supports IE9 and up. There is no possible case in which IE5 compatibility is in any way useful for Foundation users.

    I’ve shipped big production systems using Foundation, and I think I know it pretty well. I would pick any other CSS library in the world over Foundation. I would even pick no CSS library at all over Foundation. Foundation has cost me more time than any other client-side technology, including old versions of IE.

    • Thanks Tim for your opinion. By “slightly better approach for customization” I meant that Foundation offers a library of customizable mixins (eg. mixins for styling buttons or inputs, where you can pass, for example, color as a parameter). Then you are able to write selectors for your own, no pain with overriding!

      Could you provide me any example that setting `* { box-sizing: border-box}` messes anything up? In my experience it was quite opposite (not to mention, Bootstrap also sets border-box to all elements).

      And I’ve never meant to say that Bootstrap has no advantages at all – if it fits the best for your use case, it’s totally OK! 🙂 Same with Foundation. And it’s also OK to set up your own set of base classes to fit some specific needs.

    • Dude, do you really expect to design/develop complete ‘mobile first’ websites that work on –old versions of IE– using either Foundation or Bootstrap?
      It’s like asking an apple tree to give you pears.

      • Tim

        No, which is why I find it bizarre and frustrating that Foundation forces the IE5 box model on all of us.

        • I assume you know the downsides of the W3C box model, many developers [me included] find easier to remember/use the ‘IE5’ box model [border-box].

          • Interesting point of view. Personally (and I assume I’m not alone, since the `box-sizing` property was adopted into the spec), I find setting an element’s dimensions more intuitive with `border-box` property. The actual element’s width or height (space that it occupies on a page) consist of content dimensions, padding and border. CSS Tricks once explained it very clearly: https://css-tricks.com/box-sizing/.

            I must check it out and confirm, but as far as I remember it’s possible to change the default box-sizing via mixin, when using Sass or LESS framework version (at least Bootstrap should provide this option).

  • Yngwie Malware

    I agree with this article. IMO, the only real reason to use frameworks in general is because other front-end devs may need to work with the interface in the future and having a standard library in place ensures the dev will not going jumping into some proprietary crazy-person CSS. That said, it’s much easier to just design your own frameworks on a per-project basis and keep them very lean. Not all interfaces require everything that Bootstrap (et al.) offer and have personally led to me scrapping everything and rewriting a large application’s global UI rules. The amount of times I’ve seen projects using Bootstrap for UI, and then have most of the component styles overwritten/overrided anyway, is staggering. It’s not really faster when you can write it from the ground up and tailor it to your project. I will never argue with a team for wanting to use it, but just know that I secretly think you’re lazy for doing so.

    • That’s the case! But I think that when writing your styles from scratch, the project should be well documented (maybe http://sassdoc.com/ for Sass projects). Maybe instead of dropping frameworks at all – create a boilerplate that will fit a developer/company needs? Or use something really lightweight (like Bass CSS) as a base. That should also be good for demanding, creative designs that require a lot of customization.

      Just my loose thoughts 😉

  • I am fond of http://semantic-ui.com/ as another possible alternative.

    • Hi Adam, do you use it frequently in your projects?

      • Yes, I have used it for a couple of my projects so far and probably will use it on many more. I like that I can CDN/NPM different components based on my need as opposed to the entire library. Plus, I like the clean design a bit more than bootstrap.

  • Plastic_Eyeballs

    Marta, your skills as a front end developer are admirable. I have never met someone so beautiful that could write such an intriuging and eye opening article to the magic of bootstrap. As a bootstrap admirer, it is hard for me to find girls with the same interest. Usually if I ask a girl if she’s into bootstrap she looks at my feet to see if my boots are tied. Now that I know there are girls out there that are into bootstrap as much as I am, I just may continue to use bootstrap as filter to meeting girls. Thanks again for your article and poise.

    • Hi, I recommend you reading the article again, this time focusing on the _content_

you may also like these posts

Frontend and JavaScript Resources for Back-end Developers

Will Vue.js Become a Giant Like Angular or React?

11 Biggest Takeaways for iOS Developers from WWDC 2017

SUBSCRIBE TO OUR NEWSLETTER

Get the latest info about technology, design, product management (and some snaps from 10Clouds life) - subscribe to our newsletter.

Free project quote

Fill out the enquiry form and we'll get
back to you as soon as possible.

Thank you for your message!

We’ll get back to you in 24 hours.

Meanwhile take a look at our blog.

Read our blog
Gareth N. Genner Photograph

Gareth N. Genner

Co-Founder of Trust Stamp

Quote

We needed a partner who could take on our idea, and make it real. 10Clouds bring so many different skills. We feel that every member that’s involved in the project is a member of our team.