PUBLISHED ON: AUGUST 9, 2021
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 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.
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.
