Bootstrap 5 Badges Class
In this article, we will see about different types of bootstrap 5 badges class A badge indicates additional information about the content. Ex: How many times a button has been clicked, how many notifications are pending review, etc.
Badge
It converts the element to an inline-block, displays text a little bit darker in color, smaller in size, adds some padding, adds some rounded corners, etc.
Badge Color-Related Classes
- badge-primary: It sets the text color to white and the background color to blue color
- badge-secondary: It sets the text color to white and the background color to mid-gray color
- badge-success: It sets the text color to white and the background color to green color
- badge-info: It sets the text color to white and the background color to blue color
- badge-warning: It sets the text color to dark gray and the background color to yellow color
- badge-danger: It sets the text color to white and the background color to red color
- badge-dark: It sets the text color to light gray and the background color to dark gray color
- badge-light: It sets the text color to dark gray and the background color to light gray color
Example:
<span badge-primary">0</span>
<span badge-secondary">0</span>
<span badge-success">0</span>
<span badge-info">0</span>
<span badge-warning">0</span>
<span badge-danger.'>0</span>
<span badge-dark">0</span>
<span badge-light">0</span>Output:
