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 Sass.
First, read the Downloading and installing Bootstrap recipe of this chapter to find out how to download and install Bootstrap, enabling you to recompile the Bootstrap CSS code. You can edit the Bootstrap source files with a text editor.
Learn how to extend Bootstrap with custom buttons:
First, install Bootstrap as described in the Downloading and installing Bootstrap recipe of this chapter.
Open the
scss/bootstrap.scss
file and write the following lines of SCSS code at the end of this file:.btn-custom { @include button-variant(white, darkblue, green); }
After that, recompile Bootstrap's CSS by running the following command in your console:
grunt dist
Now, you can include the newly generated...