Bootstrap Q&A Logo
Bootstrap Q&A Part of the Q&A Topic Learning Network
Real Questions. Clear Answers.
Ask any question about Bootstrap here... and get an instant response.
Q&A Balloon Q&A Logo
Post this Question & Answer:

How can I customize Bootstrap's default button styles using CSS variables?

Asked on Mar 07, 2026

Answer

Previous Question Next Question
Bootstrap 5 allows you to customize its default button styles using CSS variables, which makes it easy to apply consistent styling across your project. Here is a simple example of how you can achieve this. 
<!-- BEGIN COPY / PASTE -->
        <style>
            :root {
                --bs-btn-bg: #4CAF50;
                --bs-btn-border-color: #4CAF50;
                --bs-btn-hover-bg: #45a049;
                --bs-btn-hover-border-color: #45a049;
                --bs-btn-active-bg: #3e8e41;
                --bs-btn-active-border-color: #3e8e41;
            }
        </style>

        <button type="button" class="btn btn-primary">Custom Button</button>
        <!-- END COPY / PASTE -->
Additional Comment:
  • You can customize button colors by defining CSS variables in the `:root` selector.
  • The `--bs-btn-bg` and `--bs-btn-border-color` variables set the default background and border colors.
  • The `--bs-btn-hover-bg` and `--bs-btn-hover-border-color` variables define the colors on hover.
  • The `--bs-btn-active-bg` and `--bs-btn-active-border-color` variables are used for active button states.
  • Apply these styles globally by placing the `