Most of the visible Bootstrap styles can be overridden simply by using pre-defined Bootstrap variables. Before proceeding, you should understand that Bootstrap was initially compatible with LESS only. They have later ported it to the Sass version.

Hence, all the variables present in the LESS version remain the same in the Sass version, as well. Bootstrap hasn't provided a dedicated page for the list of variables present in Sass, however, you can find the list of variables in the LESS version on their official website (http://getbootstrap.com/customize/#less-variables). Let's proceed and change some of the default Bootstrap styles.

In our application, we have used .btn-success at various places. So, let's change some of the CSS styles in it. Re-open the application.css.scss file, and add the following lines before the Bootstrap's import line:

$btn-success-color: #333;
$btn-success-bg: #AEDBAE;
$btn-success-border: darken($btn-success-bg, 5%);

We can change the style of the .btn-success class completely through the $btn-success-color, $btn-success-bg, and $btn-success-border Bootstrap Sass variables. In the above code, I have changed the text color of the button to #333. I have also lightened the background color to a new HEX color, and finally changed the border color using the darken color function in Sass.

You can go through the whole list of available variables and make the customizations accordingly. You can also include the available Bootstrap theme by adding the following line in the application.css.scss file:

@import "bootstrap/theme";

The bootstrap/theme is the official Bootstrap's default style customized from Bootstrap's theme. It comes with some cool styles and you should try using it.