Bootstrap 5 Badges Background colors

Bootstrap 5 Badges Background colors provide different utility classes for backgrounds that help to enhance the appearance of a badge. The default background of any badge is ".bg-light", which can be used with text color utility, like .text-dark class, which helps to enhance its styling.

Badges Background Colors Classes: The Background colors class can be used with the help of the .bg-* class followed by the below classes:

• bg-primary: This class is used to indicate primary information with blue color.
• bg-secondary: This class is used to indicate secondary information with gray color.
• bg-success: This class is used to indicate the successful completion of any task with a green color.
• bg-danger: This class is used to indicate danger information with red color.
• bg-warning: This class is used to indicate warning information with yellow color.
• bg-info: This class is used to indicate any information that is not essential with light blue color.
• bg-light: This class is used to add a light color background.
• bg-dark: This class is used to add a dark color background.

Syntax: The * is replaceable with any one of the above Badges Background Colors Classes.

<span class="badge bg-*">
 ...
</span>

Example 1: This example describes the basic usage of the Bootstrap 5 Badges Background colors, where we have displayed all the background colors available for badges.

Output:

👁 Image

Example 2: This example describes the use of different background utility classes to change the appearance of the badge.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/components/badge/#background-colors