Building a customized Bootstrap

One of the reasons to use Bootstrap is that you can rebuild a customized version fairly easily. The stylesheets are built using LESS, which is one of the CSS preprocessors to simplify CSS development. In Bootstrap's code, one file (less/variables.less) contains variables used throughout the rest of Bootstrap's .less files. Change one variable, and it can automatically affect the rest of Bootstrap.

Earlier, we overrode a couple of Bootstrap behaviors with our custom CSS file, public/stylesheets/style.css. This is acceptable for changing a couple of specific things, but that technique doesn't work for large-scale changes to Bootstrap. For serious Bootstrap customizations you'll want to learn your way around this file.

Let's set ourselves up to allow rebuilding a customized Bootstrap. First, run this:

$ cd bower_components/bootstrap
$ npm install
$ npm install grunt-cli

These commands install dependencies to support building Bootstrap. Fair warning, this can take...