Why does Bootstrap include a bootstrap-theme file?

Question

The question is similar to this one: How to use bootstrap-theme.css with bootstrap 3? but not a duplicate. I\'m interacting with Bootstrap at .less level and recompilin

Answer 1

Bootstrap 3 took an approach to strip opinionated style from all of its components. This was because developers were having to over write style and add their own which was causing bloated CSS. It is much better to start with a flat design that can be used as a foundation and build on top of that as you wish.

Thus enters theme.less, which is a template. It is a starting point for creating a unique theme. If you include it in your bootstrap.less build you will get the default Bootstrap theme we are all use to seeing (i.e. slightly raised buttons, gradients etc..). This paired with your variables.less file give you complete control over the presentation style of your UI.

The typical workflow for using Bootstrap with LESS is to consume it with Bower. The Bower site will explain how to install bower with npm. Assuming you have bower installed, use your command line app of choice and cd into/your/root/path/. Run the following:

bower install bootstrap --save

Bower installs all packages into a bower_components/ directory. You will never alter files installed by Bower. You should copy three files from the Bootstrap LESS files into your own style folder. These are variables.less, bootstrap.less and theme.less. You can check out my repo I set up as a staring point for all this.

The bootstrap.less file you copied should be altered so the file paths for all the Bootstrap @import components reference the ones installed by Bower. You can then @import your copies of theme.less and variables.less into bootstrap.less. Make changes as you wish and compile your theme.

When you want to update bootstrap to the latest version you can simply use bower to do so and make any tweaks to your copied files as needed to make sure they match up with anything changed in a new release.

I hope that answers your question.