O'Reilly logo

Extending Bootstrap by Christoffer Niska

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Customizing variables

The easiest way to customize Bootstrap through LESS is to customize its variables. To do this, you need to perform the following few modifications to your project:

  1. Create a new LESS file named custom-variables.less in the less directory. Open main.less and add the following line to import the new file:
    @import "custom-variables";

    You can now override Bootstrap variables easily by redeclaring them in custom-variables.less, and Bootstrap will use the overridden values instead of the defaults when it is compiled into CSS.

  2. Open custom-variables.less and add the following line:
    @brand-color: #bada55;

    This will override the primary color in Bootstrap with the same greenish color that you used in the previous chapter. As you can see, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required