How to Change Button Color in Bootstrap 5 ?

Last Updated : 15 Feb, 2024

Bootstrap 5 provides developers with a lot of capabilities that enable them to create responsive and aesthetically pleasing online apps. Developers frequently require customizations, such as altering button colors to better reflect their branding or design philosophies. This post will walk you through the process of altering the button colors in Bootstrap 5 step-by-step.

Table of Content

Using predefined color classes
Using custom CSS styles

Using predefined color classes

A range of pre-styled buttons are available with Bootstrap and may be readily altered. With Bootstrap, buttons are made with the <button>` element, and preset classes may be used to change the color and look. To change the colors of the button, you can define custom styles or use one of the predefined color classes to alter the color of a Bootstrap button. There are several pre-defined color classes in Bootstrap like btn-primary, btn-secondary, btn-success etc.

Syntax:

<button type="button" class="btn btn-primary">Primary Button</button>

Example: To demonstrate changing the color of the button using the predefined bootstrap classes.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
          rel="stylesheet" />
 
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
    </script>
</head>
 
<body>
    <div class="container text-center">
        <div class="mt-1">
            <h2 class="text-success">GeeksforGeeks</h2>
            <h2>Different colors of buttons in Bootstrap 5</h2>
        </div>
        <div class="mt-3">
            <button type="button" class="btn btn-primary">
                Monochromatic Blue
            </button>
            <button type="button" class="btn btn-secondary">
                Grey
              </button>
            <button type="button" class="btn btn-success">
                Green
              </button>
            <button type="button" class="btn btn-danger">
                Red
              </button>
            <button type="button" class="btn btn-warning">
                Yellow
              </button>
            <button type="button" class="btn btn-info">
                Sky Blue
              </button>
            <button type="button" class="btn btn-light">
                Off White
              </button>
            <button type="button" class="btn btn-dark">
                Monochromatic Black
              </button>
        </div>
    </div>
</body>
 
</html>

Output:

There are different type of button in Bootstrap

Using custom CSS styles

User can also customize the color, by adding hard coded CSS styles according to there own needs and requirements.

Example: To demonstrate changing the color of the button using custom CSS styles.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
          rel="stylesheet" />
 
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
      </script>
 
    <style>
        .custom-btn {
            background-color: #8b0000;
            color: #fff;
        }
    </style>
</head>
 
<body>
    <div class="container text-center">
        <div class="mt-1">
            <h2 class="text-success">GeeksforGeeks</h2>
            <h2>Custom color of button in Bootstrap 5</h2>
        </div>
        <div class="mt-3">
            <button type="button" class="btn custom-btn">
                  Custom Button
              </button>
        </div>
    </div>
</body>
 
</html>