Bootstrap 4 and 5 have several methods for styling button color. In this tutorial we will create several custom buttons using classes and variables for controlling color. I will show examples with both vanilla Bootstrap and React-Bootstrap.
Here are the buttons we will create in this tutorial:

Bootstrap has lots of built-in variables and classes. Some of these we will override, and we will also create a new class and a new variable.
Change Bootstrap Button Color with New Classes
The simplest way to change bootstrap button color is with a new custom class. In this example I made a new class called btn-custom-class
. Here’s the Bootstrap code:
//css
.btn-custom-class {
background-color: wheat;
}
//jsx
<button className="btn btn-custom-class">Custom Button (Class)</button>
I included the built-in btn
class because this gives the button some of it’s size and other style properties. I also added 12px margin right to the btn
class.
Here’s how this looks in the DOM:

Notice the --bs-btn-bg
tag? This applies a background color to the button that is being overwritten by my btn-custom-class
.
Another interesting thing is if I use a react-bootstrap button component (import Button from "react-bootstrap/Button";
) instead of a react button, then the btn
and btn-primary
classes are applied by default. The btn-primary
class adds a border and hover color that use the primary
blue color.

Read this to learn how to customize bootstrap button hover color.
Change Bootstrap Button Color with Class Overrides
We can override existing bootstrap classes. Below is a list of the main theme colors.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
These translate to button classes. For example, to apply info style on a button use btn-info
.
Here’s an example of overriding an existing class:
//css
.btn.btn-info {
background-color: aqua;
}
//jsx
<button className="btn btn-info">Info Button</button>
In order to override the btn-info
class I had to make my selector more specific by targeting .btn.btn-info
.
It is interesting to see how the color change trickled down to several different btn-info
tag colors in the dev tools style section:

Here’s a deep dive on bootstrap button click events.
Change Bootstrap Button Color with Variable Overrides
We can create new variables in our .scss
file for styling buttons or other components. Here’s an example of creating a new variable and using it in a class:
//css
$custom-bg: #800020;
$custom-txt: #fffdd0;
.btn-custom-var {
background-color: $custom-bg;
color: $custom-txt;
}
//jsx
<button className="btn btn-custom-var">Custom Button (Var)</button>
Since btn-custom-var
is not a pre-existing class, we don’t see all the tags in dev tools like we did with the btn-info
class. We do still see the tags generated by the .btn
class.

We can customize Bootstrap variables for many component classes. Here’s an example of customizing the Bootstrap variables for the NavBar classses.
Change Bootstrap Button Color with Theme Override
The default Bootstrap theme has several color variables associated with it. I listed them in a previous section. These variables can be overridden with new values. Here’s a code example of overriding the primary variable:
//css
$primary: green;
//jsx
<Button>Primary Button</Button>
In this example I am using a React-Bootstrap button, which implicitly has className="btn btn-primary"
. We can see it rendering with these classes in the DOM:

These colors are used as part of Bootstrap’s theme. When we override them, we are overriding the theme. It is also possible to add new colors to the theme.
Here’s a tutorial on how to customize the React-Bootstrap special Close button.