Changing the background color of a button in Bootstrap 4

Question

I want to change the color of a button in Bootstrap 4 Alpha 6.

In my _custom.scss, I include:

$brand-primary: $purple; 

But in order to change the button color from blue to purple, I must also include:

 $btn-primary-bg: $purple; 

Shouldn't the first line be included?

That is all I have in my file.

 $purple: #a02971; $brand-primary: $purple; $enable-rounded: false; 

The last line successfully removes the rounded corners of my button, so I know that my recompilation of sass files works. But when I look in the generated css, the background color of the button remains blue by default.

Answer 1

For the color changes to be correctly propagated during scss compilation, you need to edit the bootstrap.scss file and import the user parameters before the variables.

new bootstrap.scss excerpt:

 // Core variables and mixins @import "custom"; // fix problems with variable overrides not propagating @import "variables"; @import "mixins"; //@import "custom"; 

Answer 2

You only need to change $brand-primary to set the "primary" color.

 $purple: #551a8b; $brand-primary: $purple; 

http://www.codeply.com/go/6jlKsNT416