## Bootstrap 5 Badges
Badges are small, versatile components used to add metadata, highlight new or unread items, or display counts and labels. In Bootstrap 5, badges scale to match the size of their immediate parent element by using relative font sizing (`em`).
To create a badge, add the `.badge` class along with a contextual background utility class (such as `.bg-secondary`) to an inline element like ``.
---
## Basic Usage and Scaling
Badges automatically scale to fit the size of their parent element (e.g., headings `
` through `
`).
### Example
```html
Example Heading New
Example Heading New
Example Heading New
Example Heading New
Example Heading New
Example Heading New
```
---
## Contextual Variations
Bootstrap 5 provides several contextual background classes to change the appearance of your badges. Use these classes to convey different meanings (e.g., success, danger, warning).
### Example
```html
PrimarySecondarySuccessDangerWarningInfoLightDark
```
> **Note on Accessibility:** When using light background colors like `.bg-warning`, `.bg-info`, or `.bg-light`, remember to add a text color utility class like `.text-dark` to ensure proper contrast and readability for visually impaired users.
---
## Pill Badges
If you prefer rounded, capsule-like badges, use the `.rounded-pill` utility class. This adds a larger `border-radius` to make the badge look like a pill.
### Example
```html
PrimarySuccessInfoWarningDanger
```
---
## Badges Inside Elements
Badges can be nested inside other components, such as buttons, to display notification counts or status indicators.
### Example: Badge Inside a Button
```html
```
### Example: Positioned Badge (Notification Dot)
You can also use Bootstrap's utility classes to position a badge in the corner of an element, which is highly useful for unread notification indicators:
```html
```
---
## Considerations and Best Practices
1. **Accessibility (Screen Readers):** Badges are often used to display counts or status updates. Screen readers may read the badge content out of context. Always include a visually hidden description using the `.visually-hidden` class for screen readers (e.g., `unread messages`).
2. **Contrast Ratio:** Ensure there is sufficient contrast between the badge background color and the text color. Use `.text-dark` on light backgrounds (`.bg-light`, `.bg-warning`, `.bg-info`) to comply with WCAG 2.1 contrast guidelines.
3. **No Default Hover States:** Unlike Bootstrap 4, badges in Bootstrap 5 no longer have hover or focus states when used on anchor (``) tags. If you need actionable badges, use buttons with badge styling or custom CSS.
YouTip