Signup/Sign In

How to change Button color in Bootstrap 5?

The buttons are a very useful component in the webpage. It is widely used in webpages to toggle items, navigate between pages, etc. Bootstrap 5 provides various classes to customize the buttons. Bootstrap provides various colored buttons each attached with some semantic meaning.

Bootstrap Button Classes

The following are the classes that can be used to create and style buttons in bootstrap.

Button type color Significance/Action
.btn light gray Can be used for any action.
.btn-default light gray can be used for any action.
.btn-primary Blue Used for some primary action.
.btn-Success green Can be used as a submission button for some successful action
.btn-info light blue Can be used for informational purpose
.btn-link white used for linkable buttons
.btn-danger red used in the context of any danger
.bt-warning yellow used in the context of warning
.btn-secondary dark gray for some secondary actions
.btn-dark black no general significance
.btn-light white no general significance

Add Bootstrap Button Color

Add the above button style with .btn class to add color to buttons. Here is an example to show the usage of these classes.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script></head>
<body>    
	<button type="button" class="btn btn-primary">Primary</button>
	<button type="button" class="btn btn-secondary">Secondary</button>
	<button type="button" class="btn btn-success">Success</button>
	<button type="button" class="btn btn-danger">Danger</button>
	<button type="button" class="btn btn-warning">Warning</button>
	<button type="button" class="btn btn-info">Info</button>
	<button type="button" class="btn btn-light">Light</button>
	<button type="button" class="btn btn-dark">Dark</button>
	<button type="button" class="btn btn-link">Link</button>
</body>
</html>

Output:

Here is the output of the above program.

Buttons color

Buttons outline color

If you do not want the hefty background color to the buttons. But want some buttons with color to the button's border then use the .btn-outline class. It will add color to the button's border and inner text. Here is a program to customize buttons with the .btn-outline class.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script></head>
<body>    
	<button type="button" class="btn btn-outline-primary">Primary</button>
	<button type="button" class="btn btn-outline-secondary">Secondary</button>
	<button type="button" class="btn btn-outline-success">Success</button>
	<button type="button" class="btn btn-outline-danger">Danger</button>
	<button type="button" class="btn btn-outline-warning">Warning</button>
	<button type="button" class="btn btn-outline-info">Info</button>
	<button type="button" class="btn btn-outline-light">Light</button>
	<button type="button" class="btn btn-outline-dark">Dark</button>
	<button type="button" class="btn btn-outline-link">Link</button>
</body>
</html>

Output:

Here is the output of the above program.

Button outline colo

Conclusion

The color provided in Bootstrap 5 adds semantic meaning to the buttons. It also enhances the looks of the buttons. So include colors in the buttons either by using outline colors or background colors.