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:
Create a new LESS file named
custom-variables.lessin thelessdirectory. Openmain.lessand 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.Open
custom-variables.lessand 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, instead of overriding a lot of rules, we simply need to change the value of a single LESS variable in order to apply the customization to all of the elements that use the primary color across Bootstrap. It is also worth mentioning that back when you...