There are many ways to misuse Bootstrap, but it’s entirely possible to use it on a better way with a few tweaks on your process.

Use it as an external package

The greatest thing about Bower it’s not the ability to download whatever library or script but to use it as the package manager it’s intended to be, which primarily means to never modify packages installed with Bower.

There’s a simple reason for this: one of the key advantages of using a package manager is being able to keep your packages up-to-date, and since a package manager it’s not a version control system, whatever changes you make to an installed package will be lost with an update.

In the case of Bootstrap, here’s what I do:

1. Install with Bower.
2. Create a copy of the main Bootstrap file (the one with all the imports) to the directory where I’ll define my own styles for the project (for instance, copy to styles/).
3. Create a copy of the Bootstrap variables file to the same directory.
4. Modify the import paths to use Bootstrap source files and my own copy of the variables files.
5. Add my own styles as imports to the main stylesheet.

And there you go!

Enable components as needed

One of the most repeated complains about Bootstrap it’s that you’ll be loading a lot of styles that you’ll probably not going to use, such as jumbotron, wells or media object components. The thing it’s… if you’re not going to need it, don’t use it!

Actually, I think it’s good practice, immediately after that fourth step, to comment all of Bootstrap’s @import rules and only un-comment them as needed.

There are only a few imports that are really needed to compile from Bootstrap, such as variables, mixins, normalize and scaffolding (maybe type as well), which will provide the most basic functionalities and styles, and that’s just for 2.94 Kb (using autoprefixer and cssmin). After that, you should enable other components only when you need what they provide, and you’ll be saving on lots of bytes; for instance:

Basic Bootstrap foundation (no pun intended)	2.94Kb
Plus the type component	7.08Kb
Including all the components used on this site	20.07Kb
… plus all my custom styles	49.7Kb
… and all Bootstrap components	147.34Kb

So, as you can see, by enabling just what I needed, my CSS it’s about a third of the size it would be if I included all Bootstrap modules.

Use grid mixins for a semantic grid

It’s true that the default grid classes are not very semantic (even though they’re very clear for generating quick protoypes) and using the entire grid component will add more than a few kilobytes to the generated CSS, but here again, there’s a better way.

Even though it’s even mentioned on the official documentation, this seems to be one of the most easily forgotten features about Bootstrap: you can use the included mixins for generating semantic grid selectors.

For instance, using the SASS port you might define something like:

#main{
@include container-fixed;
}
.row{
@include make-row;
}
#content{
@include make-md-column( 14 );
@include make-md-column-offset( 4 );
}
#aside{
@include make-md-column( 5 );
@include make-lg-column( 4 );
@include make-lg-column-offset( 1 );
}

You need to import the mixins file but you can leave the “grids” component commented; this way you can use semantic selectors, an extensively tested grid, and by using only what’s needed, you’ll also benefit from a reduced file size.

And by the way, you’re not forced into the 12-columns grid. It only takes one variable to redefine it.

… this doesn’t mean Bootstrap it’s perfect

Of course, and there are plenty reasons, such as:

• Bootstrap defines several deeply nested selectors — which surely you’ve found using the navigation components.
• Some components require deeply nested HTML as well.
• It can be hard define your own visual style — some components are quite finished in terms of design, so they’re harder to fit on your own.
• It doesn’t follow a more strict naming convention, such as BEM, OOCSS or SMACSS.

And I’m sure you can name many more, or actually not even care and just use a lightweight grid framework and that might be enough for you — there are many and very attractive alternatives with several strengths that you should be comparing before a new project.

In the end, I’d say you need to remember that you can use Bootstrap as a full-fledged framework for rapid prototyping, but that you can also spend a little time and a little effort to just take what you’re actually using and meld it into your project for an optimized and vastly documented build.