YouTipDefault
Success
Warning
Important
Info
Inverse
1
2
4
6
8
10
Bootstrap V2 Inlinelabels Badges
## Bootstrap v2: Inline Labels and Badges
In Bootstrap v2, **Labels** and **Badges** are simple, lightweight inline components used to highlight text, display metadata, show counts, or flag status updates.
This tutorial covers how to implement and customize inline labels and badges in Bootstrap v2.
---
## Inline Labels
Inline labels are designed to provide eye-catching annotations, tags, or status indicators next to other text content.
### Syntax and Classes
To create a label, apply the base class `.label` to an inline element (typically a ``). You can then use contextual modifier classes to change its background color:
* `.label`: Default (Gray)
* `.label-success`: Success (Green)
* `.label-warning`: Warning (Orange)
* `.label-important`: Important (Red)
* `.label-info`: Information (Blue)
* `.label-inverse`: Inverse (Dark Charcoal/Black)
### Code Example
```html
```
### CSS Implementation Details
In the standard `bootstrap.css` file (v2.x), the styles governing `.label` and its contextual modifiers (such as `.label-success`, `.label-warning`, etc.) are defined approximately between lines 3162 and 3200.
---
## Badges
Badges are small, circular indicators primarily used to display counts, indicators, or unread notifications. They are commonly found in email clients (like Mail.app) or mobile applications to show push notification counts.
### Syntax and Classes
To create a badge, apply the base class `.badge` to an inline element (such as a ``). Similar to labels, you can use contextual modifier classes to change their appearance:
* `.badge`: Default (Gray)
* `.badge-success`: Success (Green)
* `.badge-warning`: Warning (Orange)
* `.badge-important`: Important (Red)
* `.badge-info`: Information (Blue)
* `.badge-inverse`: Inverse (Dark Charcoal/Black)
### Code Example
```html
```
---
## Important Considerations
1. **Version Compatibility**: Badges were introduced in later iterations of Bootstrap v2. If you are using Bootstrap v2.0.1 or earlier, the `.badge` styles are not defined. Ensure you are using **Bootstrap v2.0.3 or higher** to use badges out of the box.
2. **Empty Badges**: In Bootstrap v2, badges will collapse (hide) automatically if they contain no text or content, thanks to the `:empty` CSS pseudo-class selector.
3. **Accessibility**: When using labels or badges to convey status (e.g., using a red `.label-important` for an error), ensure that the text content itself clearly describes the status for screen reader users, as color alone is not sufficient for accessibility.