How to modify bootstrap 4's primary color?

Question

I am using bootstrap 4 alpha-6,I want to modify bootstrap 4's primary color(#0275d8),is there a variable that can set the value?

Answer 1

You could overwrite the relevant css styles with your own custom styles, otherwise it might be worth it to look into using Less. Less is a CSS Preprocessor that allows you to store variables used in your css such as color values. You can see an example of this below:

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

.masthead {
  background-color: @brand-primary;
}

You can read more on bootstraps use of Less here

Answer 2

Update 2019 Bootstrap 4

It's easily done with SASS. Just set the $brand-primary $primary variable.

$primary: hotpink;

Demo on Codeply

---

See: How to change the bootstrap primary color?