Change Bootstrap Button Color with Classes or Variables!

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.