how to change bootstrap version 4 button color

Question

I can change the primary button color by changing the theme-color in bootstrap v4. But it affects all other components as well. How to set the primary button colour without affecting the theme color? I dont want to set brand-primary and achieve it.Any other alternatives?

Answer 1

2019 Update for Bootstrap 4.1+

Now that Bootstrap 4 uses SASS, you can easily change only the button color using the button-variant mixins. Since you only want to change the primary button color, and not the entire primary theme color, you need to use the button-variant mixins in SASS. You can set whatever $mynewcolor and/or lighten() and darken() percentages you'd like.

$mynewcolor:teal;

.btn-primary {
    @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}

.btn-outline-primary {
    @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}

https://www.codeply.com/go/f3uTwmsCVZ (SASS demo)

This SASS compiles into the following CSS...

.btn-primary{color:#fff;background-color:teal;border-color:#005a5a}

.btn-primary:hover{color:#fff;background-color:#004d4d;border-color:#009a9a}
.btn-primary:focus,.btn-primary.focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}
.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:teal;border-color:#005a5a}
.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#00b3b3;border-color:#000}
.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}

.btn-outline-primary{color:teal;background-color:transparent;background-image:none;border-color:teal}.btn-outline-primary:hover{color:#222;background-color:#009a9a;border-color:teal}
.btn-outline-primary:focus,.btn-outline-primary.focus{box-shadow:0 0 0 .2rem rgba(0,128,128,0.5)}
.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:teal;background-color:transparent}
.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#009a9a;border-color:teal}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,128,128,0.5)}

https://www.codeply.com/go/l9UGO7J6V1 (CSS demo)

---

To change the primary color for all contextual classes (bg-primary, alert-primary, etc..) see: Customizing Bootstrap CSS template and How to change the bootstrap primary color?

Also see:
https://stackoverflow.com/a/50973207/171456
How to theme bootstrap

Answer 2

Try this method

Add a class to the button , Here custom-btn and write the css for that in our stylesheet.

.btn-primary.custom-btn {
	background-color: #000;
	border-color: #000;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
	<button type="button" class="btn btn-primary custom-btn">Custom</button>
  <button type="button" class="btn btn-primary">Default</button>
</div>

Answer 3

You can add custom color or redefine colors by change them via variables in sass files (Bootstrap 4).

$theme-colors: (
   primary: red,
);
@import "~bootstrap/scss/bootstrap";

If you use same keys for your colors, you will redefine Bootstrap. Otherwise, with new keys you create new classes.

This example set primary color from blue to red.