In the Customizing Bootstrap with variables recipe in this chapter, you can read how to change Bootstrap's buttons by setting the brand color variables. In this recipe, you will learn how to extend Bootstrap with one or more custom buttons by leveraging Less.
This recipe requires Bootstrap's source files. You can download these from http://getbootstrap.com/getting-started/#download. To recompile Bootstrap, your system should have Grunt up and running. Read more about Grunt in Chapter 11, Compiling Less Real time for Development Using Grunt. You can edit the source files with a text editor.
You need to perform the following steps:
Download and unzip the source files into your working directory from http://getbootstrap.com/getting-started/#download.
Open the
less/bootstrap.less
file and write the following lines of Less code at the end of this file:.btn-custom { .button-variant(white; darkblue; green); }
Then, recompile Bootstrap's CSS by running...