There are plenty of downsides to Twitter Bootstrap as well. Let’s have a look at the major problems it can create:

1. It doesn’t follow best practices

One of the major issues I have with Twitter Bootstrap is that you end up with a whole lot of DOM elements crammed full of classes. This breaks one of the fundamental rules of good web design, the HTML is no longer semantic and the presentation is no longer separate from the content. Front-end purists will find this rather irksome, as it makes scalability, reusability and maintenance that much more of a challenge. Twitter Bootstrap also exacerbates progressive enhancement as presentation and interaction are no longer independent of content.

Argh… So many unnecessary classes!

2. It’s going to collide with my existing set-up

What if you’ve been air-dropped into the middle of a big project and want to implement all that sweet Twitter Bootstrappy goodness? There are a whole lot of problems here, conflicts in generated HTML, CSS and JavaScript to begin with. Then there’s resources, you now have to go through that big monster of a project and work out which scripts and styles need to be removed or replaced. Twitter Bootstrap could potentially create extra work as you go through the project inevitably finding and fixing weird bugs, which you could argue defeats the purpose of using it in the first place.

3. Twitter Bootstrap is heavy

Straight out of the box, Twitter Bootstrap includes CSS weighing in at 126KB and 29KB of JavaScript. If you do want to use all of the sweet functionality baked into Twitter Bootstrap, you should have a good think about resource loading times. Of course for some this may not be an issue, but here in New Zealand the internet has to be pumped all the way across the Pacific ocean, and by the time it gets here it is slow and tired. So consider your target market. Twitter Bootstrap will help you to build an attractive, responsive website with all the bells and whistles, but some mobile users could be turned away by the slow loading time and battery-draining scripting.

4. No SASS support*

Possibly one of the biggest points of contention, and definitely the key issue which puts me off using Bootstrap is the fact that it’s built with Less and provides no native support for Compass and SASS. Now don’t get me wrong, Less is okay, I’ve used it before and it certainly has it’s merits. But SASS is just better, and with a framework like Compass on top, it seems like a complete no-brainer to use it. Some helpful folks have built a Bootstrap for Compass gem, but straight out of the box, you’ll have to make do with Less. I’ll hopefully talk more about SASS and Less in a future article. In the meantime, Chris Coyier has written this article comparing the two.

5. “Hey! My new website looks just like everyone else’s!”

Twitter Bootstrap is super-popular, and therefore every dev and his dog is going be using it. While it is of course possible to customise your app or website design further, you may find time constraints force you to stick to a lot of the vanilla Bootstrap style. This can lead to the inadvertent creation of a lot of similar, generic and unmemorable websites. While Twitter Bootstrap is fast and easy to implement, creativity is often compromised as a result. Innovative designs which defy conventions can be difficult to implement in Bootstrap’s structured environment while you have a tight time constraint.

Other controversial disadvantages of using Bootstrap

Lack of semi-colons
A lot of bootstrappers have complained about bootstrap.js and its lack of semi-colons causing it to break when minified with JSMin. While not using semi-colons is fine in JavaScript, this inconvenience has produced a lot of complaints from developers looking to modify the source code.

Visitors don’t take your website seriously
Some of the more discerning users have suggested that when visiting a site with the default Bootstrap style, they have questioned the legitimacy of the site. It sounds like it’s mainly a problem with eCommerce sites, which have been associated with fraudulence in the past. By not putting the effort into customising the styling, users may start to perceive Bootstrap-built sites as untrustworthy… which is the last thing you want, especially if you’re trying to sell them something!

Bootstrap putting web designers & front-end devs out of their jobs?
This is one of the more bizarre issues; the fear that as frameworks like Bootstrap give presentation power to the web developers, the web designer/front-end developer role will become obsolete. Bootstrap is great and all, but it shouldn’t be confused with a theme. There are plenty of Bootstrap themes out there of course, which are no doubt built by web designers. Bootstrap is more like scaffolding, a speedy way for devs to prototype a website or app for baseline structure or MVP.

Bootstrap doesn’t work with JavaScript disabled
Like most web tools these days, Bootstrap doesn’t provide fallbacks for users without JS. It just means that you’ll have to provide your own fallback if you do want that support. Have a look at How many users have JavaScript disabled? for a little insight into how many users there are in the world not using JS (roughly around 1-2% worldwide). If you don’t have time to add CSS-only fallbacks, I would recommend at the least adding a message for non-JS visitors.

So… to Bootstrap or not to Bootstrap?

These are some of the problems you could encounter when you are working with Twitter Bootstrap. There are plenty of good reasons why you should use Twitter Bootstrap for your web projects though. At the end of the day, time, project and audience constraints factor into whether or not to utilise Twitter Bootstrap.

To make things easier, we’ve made this framework flowchart to help you work out which framework might be best for you, based on your project parameters and your coding preferences.

You might also be interested in Zurb’s Foundation framework, which is a less well-known Bootstrap alternative that contains a lot of the solutions to the problems that we have listed here for Bootstrap. We have written extensively about Foundation and you can read all about it in our Foundation series.

*Update

A lot has changed in the world of Bootstrap since we wrote this article. The framework has evolved and continues to improve – including a Bootstrap for Sass version being built to cater for Sassy web designers.

Sign up to our email newsletter

We hope you've enjoyed reading this article. Why not sign up to our newsletter to receive regular updates on our latest projects, research, and other news in the world of web design and development.

I decided to NOT use bootstrap css/js. At first I thought it would be the fastest way to deliver the project but when I downloaded the code and opened it, it was just ridiculously long. Why should I have to load all the classes when I will end up using maybe about 10% of it. Plus if I create my own classes, now I have to go in to the bootstrap and see where the class is overriding mine and edit it. With Developer Tools, things are not as complicated but still that is extra work which I can avoid!

On Bootstrap fan comments – I dare you to show me 3 websites built on Bootstrap that simply work on my smartphone. But really work and not with loading gaps and slow movement! I haven’t found one yet! They all work good on a computer but when opened on a phone…is just crazy. Not to mention those that look amazing, designed by big web agencies with javascript loaders on each page, my phone is dying when loading one. Because f**k logic, why make it work, let’s show we can handle javascript, like anyone cares…

Problem #1 is the actual reason that i LIKE bootstrap because i deal every day with people that make widgets and code snippets that get placed into websites and they have ZERO classes, so instead of being able to style them easily i have to call a submit button by 5 parents up because nothing has an id or class.. so it ends up like #main table td:first-child input[type=submit] :hover to get to an element that should be .contact_submit{DONE}

so to all of you “purists” i effing hate styling things behind your code. at the very least admit that MAYBE something you’re coding might want to live somewhere embedded into another website SOMEDAY.

Bootstrap or not, 90% of web users don’t really care.
If your content sparks the users interest, your webpages might very well be made of pure text. Bootstrap is like a remote, no one wants to get up from the couch to switch channels but if what’s on is interesting enough, 9 out of 10 times, they will!

I completely disagree with pretty much all of this. It sounds like someone who does not know much about CSS in general wrote it. Don’t take any advice here. Try it yourself, learn CSS more and make you’re own conclusion.

+1
Bootstrap has SASS support, It’s lightweight if it’s used properly using the customize tool.
The DOM can easily be kept clean if you know how to code.
Bootstrap is not putting people out of their jobs, i’ve never heard anything more ridiculous. It’s probably speeding up the work flow of existing web designers/developers and therefore increasing workflow if anything (using myself as this example).
Bootstrap can be extended to accommodate almost any design. Only sandbox bootstrap sites look like Bootstrap.
Almost everyone who’s going to bring value to your website wont know what Bootstrap even is.

+1 these criticisms feel like they are coming from someone that hasn’t really spent the time to figure out the power of using Bootstrap. It’s not Bootstrap or custom CSS, it’s Bootstrap with custom CSS. Once you learn the power of CSS inheritance you’ll wonder how you lived with a CSS framework like Bootstrap.

Why?
What makes designers so special these days?
Many programmers these days come from a mixed background where they have been confronted with design. Which puts them in a an advantageous position over “just” designers. Most designers I have worked with make everything nice and pretty but don’t give a damn about semantics nor do they consider how much work something will be just to make that “crisp wooshy effect” appear just for the client to turn around and say “what’s that supposed to be? remove it!”.

I’ve worked in this field for nearly 16 years now and designers are designers.
Unless you have someone who is versatile in proper UX Design, whom understands what the underlying technology has to do, my bet is, you will always have issues with designers and standards compliance.

Point being. I’ve seen many programmers that are great at designing simply because they know what is needed and they consider the follow-up steps necessary to make things work. Most designers call them selves “artists”… well… I rarely see webpages where I think “WOW that’s artistic”.

@Author: I think you have not really understood how to work with Bootstrap to make it work to you needs. If you work with the compiled sources without removing all the crap you don’t need by using LESS or SASS, which is both available for BS3, you’re gonna have a bad time.

I tend to create a clickdummy for the basic mockup with the compiled sources and then I adapt the LESS files to suit my needs. Which has proven to be a quite timesaver since I can include all my changes to the bootstrap classes in the last CSS file I load during development and simply “move” them over when happy.

I have been doing web design for over 7 years, working with a team of developers , and using bootstrap since over a year now.. and no offense to any developer, front-end or not, but honestly: so far I haven’t found something done only by developers that I (and often the Clients) didn’t want to visually edit in some way (at least during my work with my team, which luckily is a group of great professionals).

Just an opinion based on my experience, and yes, Bootstrap can be heavily customized: “overriding the bootstrap styling”, which is kind of ironic.

The “design eye” goes beyond the knowledge and expertise, sometimes it’s just part of the person, call it a genes or whatever, but not everybody has it.

want a generic looking site up really fast because you can’t hire a developer who actually has both coding and design skills? bootstrap: for designers, not actual coders.

html, css, and even javscript should be trivial things for any good web developer, which, in my opinion, makes bootstrap useless for any unique custom web apps, both from a design and back-end perspective.

I can almost understand how developers can, after serious hair pulling, write in Javascript as it is (sometimes) a logical language.

CSS however, is a language only mastered with experience of how certain techniques are handled differently across various browsers, and logic doesn’t really come into it. The same actually goes for HTML when you really get down to it.

The developers I have interviewed who deem HTML and CSS as “trivial” in my company are directed to the closest exit.

Frontend development is about a passion for pixel precision and design harmony; backend development is about a passion for perfect data and clean, maintainable code. The two are not easily mixed.

1.) You say that using multiple classes is against best practice but you don’t actually explain why. The element with the most classes in your example only has two; I would otherwise assume that you were trolling.

2.) This is not a reason not to use Bootstrap; it’s a reason for developers to not switch frameworks in the middle of a project.

3.) That’s pretty sad if New Zealand internet can’t load an extra 155kb in a reasonable amount of time. But I don’t buy that because I lived in New Zealand 10 years ago and as much as the internet was indeed lousy, Bootstrap wouldn’t have been a problem even back then. Heck, if 155kb is an issue then kiwi developers had better stick to plaintext.

4.) This completely depends on whether or not a person needs SASS.

5.) There’s no reason why Bootstrap can’t be made to look unique. Many Bootstrap sites tend to look the same because it makes prototyping very easy. Let’s not forget lazy designers.

Couldn’t disagree more. If your design is based entirely on diagonals then bootstrap is maybe not a perfect fit. Although, it seems likely you will still have a button someplace and that you would like that button to behave the same way in all browsers and that your button will be composed of colors and gradients that you’d like to define using a modern css precomiler that accepts variables for those colors so the similarities between your buttons and other elements can be centrally managed. So yes, you could start from scratch and create that system yourself that does all that but I don’t think it has much to do with the goal of a unique visual design.

More importantly, a good design is almost useless without a living, HTML and CSS-based style guide. Most projects continue to grow and change after the initial design phase. If you want an agile team where developers can build things without needing to get design involved for every minutia then you need to have some general coding styles and practices in place. A style guide is the answer. So you could spend a few weeks or months creating your own style guide from scratch. Most competent designers would have no problem starting with the Bootstrap style guide and creating something unique and beautiful and likely a heck of a lot more functional and error-free than starting with a blank file, not to mention be a better position for future growth of the design.

Web design has stylistic periods just like any living design practice. Sites have been looking all the same long before Bootstrap came into the picture. The nice thing with Bootstrap is that it’s much easier for a competent designer to change it when it does start looking all the same because it has all been implemented using well-informed, modern coding practices.

You realize that if you can load common libs like bootstrap directly from a CDN such as Google’s Developer APIs CDN. Resources are cached on the user’s machine based on domain — so — if a user has used another site that leverages the common CDNs (ie highly likely) the files won’t need to be downloaded again.

File size only has a drastic impact on a cold cache. Serving up those resources from your own server is a waste of bandwidth and poses the ‘real’ negative impact on performance.

Not to mention, the resource download limit is capped per-domain. The more domains a site fetches it’s resources from, the more concurrent connections the browser can open in parallel. That’s one of the reasons why media-heavy sites use a plethora of caches spread across domains/subdomains to serve content.

I get that designers have a valuable place when it comes to the look-and-feel of building a website but it would do a lot of good to learn some of the ‘magic’ us developers bake into the back-end to make things fast.

The source for this site indicates that you’re already loading a webfont from the Google APIs cache, what’s stopping you from trusting it with your external libraries/stylesheets.

I don’t like when blank “hello world” “bootstrap-ed” page get “only” “C” in jslow (Yahoo dev tools…), and why!? Because there is tons of js and css files/code/lines.

What would happen if eg. “C” programmer doesn’t care about garbage collector, stacks, resources etc… Or in this world about server and client resources!? Do you have sometime “freezing problems” with your browser, or scroller…!? Think about that…

Sorry but I like to write light, clean and semantics code, and I care about resources on server and client side. Also there is to many options how to solve different media screens and create complex but fast and responsive templates.

hi, major reason you describe for not using the bootstrap are the piece of crap. and nothing much more than it. as a developer i hate web-designing so for me it is the best thing that i have got.
Regards.

While we‚Äôd love to tell all the web developers that there is one solution that will solve all of their problems 100% of the time, the fact is that everyone‚Äôs project, project scope and their attitude towards frameworks are different, so it is impossible to say which framework is the definitive framework for all projects and for all developers.

For example, if you were new to frameworks and would like to set things up and get going really quickly, Bootstrap would be the ideal framework for you. Whereas if you would like to have more control over the framework but did not mind taking a bit more time to set things up, Foundation might be more suitable for you.

To make things easier, we‚Äôve made this framework flowchart to help you work out which framework might be best for you, based on your project parameters and your coding preferences.

This article was dated June 18th, 2013. Just to illustrate how fast things are moving and change, Bootstrap 3.0 SASS is out where you can decide what components should be included. Meaning you can make it as heavy or lightweight as needed. As for sites looking the same, that depends highly on the designer’s experience with bootstrap. In order to break the rules, one has to know the rules first.

Reasons 1 and 2 are valid. I can understand why frontend designers want semantic markup though I’m not sure if it really matters for rendering a web page. As for collisions with an existing codebase, that’s true for any framework you would throw in I guess.

for me it’s common for prototyping or starter of the webapps (back-end), but not recommended for the custom front end. Take a glance for another css framework, maybe we could see the differences, or you could create best css framework to share with us

I use Bootstrap a lot, well almost all my projects start in the framework. I don’t like reinventing the wheel with every project, and the turnaround time from signing to completed site has helped my bottom line.
I see the value in bespoke websites, and there is a great need for them. But with most sites just being a meet and greet to potential clients, there is no real need for great originality, just something functional and clean. Everything has its place and context.

I think it all boils down to will the client benefit from using Bootstrap or Not, and then making the decision to use it.

Interesting points, but…as far as weight goes…pick and choose what you want for your project…there’s no point in including EVERY little diddy bootstrap has to offer, when you could write your own. Bootstrap at it’s core, in my opinion, should be used simply as a roadmap.
And….they look the same? Sorry, but that’s a poor excuse…the lack of originality among developers and builders reflects on the designer, not bootstrap.

I tend to use Skeleton as a start point as it’s way less bloated than Bootstrap. Generally, I only ever need the normalise and responsive elements for the CSS. I don’t need all the javascript libraries as I tend to use my own plugins and libraries a lot of the time and I have my own conventions for writing most visual style css.

For quick agile prototyping though, Bootstrap is very decent and you can get up and running very quickly… It’s lack of semi-colons in the javascript is pretty criminal to be honest though.. Minifying code is common practice and they should definitely fix this.

I’ve been using Bootstrap for the last months, and it’s very easy to learn. It’s fully customizable, so if you think it’s the same everywhere it’s because you don’t customize it enough. It’s a rapid development framework, and enhances productivity. Thanks!

I’ve spent weeks and weeks pulling it apart, rebuilding it, editing it and to be honest, if I had been let loose on building our own customised code from the outset I would have had far more control with our own specific needs and would probably be further along the road. It has it’s place, but I don’t agree with many of the conventions in TBS. It is class soup and an absolute nightmare to debug down.

Everyone’s different and all, but I would never use it for my own stuff.

Important to note that Twitter Bootstrap was designed to streamline internal apps quickly. Sure it’ a big framework but it has everything (or as much as you want) to work with. I don’t see that as a negative, I just see your use cases requiring a different framework

thank you for an objective and refreshing look at this. i am still on the fence in regards to twitter bs, but i will say that the more i use it, the less enamored i am with it.

the point that everyones’ website looks the same, with bootstrap is so poignant, but lost in the startup world. i’ve had several ceo newbies tell me “in order for my startup to conquer the market, my website must look and function exactly like so and so’s.” this is a recipe for failure right out of the gate on so many levels.

also completely overlooked is the bloat of adding yet another js library, which would be loaded along with less.js, modernizr, jquery, jquery mobile, jquery ui, and a slew of others.

and lastly, giving engineers/developer the ability to “design” stuff without a designer is a really bad idea.

It seems to me that most of the reasons you point out are closely related to your workflow and habits, not to real universal issues.

Point one regarding best practices: the web has evolved from the first years of the 2000s, projects are more complex and in need of a front-end framework. Everybody concurs now that the semantic of classes can be related to how they look and works and not only what content they host. In a way this has always been the case: you always had lightbox, accordion and dropdown classes, more the interface component, more the classes. This not hinder at all reusability, because the component objects are another thing from the content objects. From Facebook to Twitter to Yahoo and so on everyone now agree with this view.

Point two about existing setup: it’s a personal issue. You can use your setup, you can use Bootstrap you could even port your preexisting code to Bootstrap standards if you like.

Point three about Bootstrap heaviness: Bootstrap is heavy if you use all of it, all the CSS all the JS and so on. If you don’t need every component just don’t use all of them: there is a customizer for that. If you really need all the components, the size it’s a non issue, another framework with all the same components (or a collection of personal html/css/ snippets and js scripts) would not be lighter.

Point four it’s another personal issues and not an objective problem: you prefer SASS (I don’t, for example) so you don’t like a framework based on LESS. Again, it’s a problem for your or other SASS users, but Bootstrap (as any software) doesn’t force nobody to use it. As you said, there is an always update SASS port of Bootstrap, so this problem doesn’t actually exist in reality.

Point five: if more websites using Bootstrap looks similar it’s the designer and developer fault, not a Bootstrap problem. Any framework (web or not) has a standard appearance, it’s not possibile otherwise. You can find websites that use Bootstrap and are similar in the same way you can find iPhone app that look similar because they use Cocoa and the developers were lazy. Lazyness is not a code issue, it’ s a human issue.

For 98% of designers in world, bootstrap (or similiar) gives a standard framework to do the things in better way. 2% like their own way with their advance concept. But hey, few of those 2% really were not in good position to think better till they used Twitter Bootstrap.

One of the biggest issues I have wasn’t listed: Bootstrap puts too much visual design into the HTML. “pull-left”, or “span6″ for instance. What if you wanted to make the detail column used in your site a different width across the board? If it’s defined with “span6″ what does that mean?

There’s nothing stopping you from defining your own classes, overriding the Bootstrap defaults or even customising the column and gutter widths. If none of these do it for you then perhaps you’re right: Bootstrap isn’t the best option for you.

I actually disagree. Bootstrap themes are coming along in leaps and bounds, and if you check out some of the latest themes people are making with bootstrap at http://www.bootstraptheme.net I think you’ll see a lot of your points are invalid.

Good insights but as you say it really depends on the site, project and audience. For a web application with lots of forms and data back and forth Bootstrap is pretty great especially in conjunction with something like angular.js or durundal.js. I’d say that in these cases the consistency of bootstrap is a distinct advantage (same way all windows or osx apps have a similar look and feel)

Re: Front End Devs out of work….
It seems to me that with the powerful javascript and css frameworks available, prospects for the front end web developer have never been greater. If frameworks can save us from the more repeatable parts of the code it frees up time for design and pushing boundaries of applications. If we are really replaceable by frameworks (which I don’t think we are at this point) its time to move our skills forward.

Ultimately I think it’s ‘horses for courses’ – what works for me might not work for you. Let’s not get too critical of others who make choices different to our own.
Personally, I think there is a strong argument that using a framework such as Bootstrap encourages best practice and aids conformity. The problems I’ve seen are when people plonk it onto existing sites and expect it to work out of the box. When used properly it’s not buggy, nor does it tend to create unnecessary collisions.
If you’re using gzip on your server then the file sizes are dramatically reduced – apparently as low as 10KB, which is pretty good, esp if you’re using a CDN.
Personally, I have no issue with the classes – I think it’s sometimes too easy to nitpick such things – let the purists argue while the rest of us actually do something. However I do find it rather heavy on adding DIVs, though this is often more a limitation of HTML/CSS than the framework.
Arguably bootstrap could potentially limit creativity – people simply using the unmodified styles – but that’s not it’s job. It is, after all, a framework. It’s simply the foundation to build upon.

Hi Luis, thanks for your comment. Bootstrap is good for wire-framing and launching a baseline product/MVP but I think you will find that once your product has gone past the market validation stage, your customers will be demanding for a better user experience and a more complex user interface with more features.

At that stage, you will find that Bootstrap doesn’t have all the answers and your product/site will need that human touch, in the form of a designer.

I used to use twitter exclusivey but now I realize that it’s a great framework to learn from, and you should move forward to make your own little CSS library for rapid development. So, no more bootstrap for me.

Thanks peter, that sounds like some wise advice. Frameworks are great when you’re learning, but as you learn more about them, you do start to realize how much clutter and dodgy code they involve.

A homemade library is always going to give you greater flexibility and control than a big, bulky framework. What sort of features have you included in your library? Is it built from scratch or on top of an existing library?