Badges
The badge element is designed to highlight new or unread messages. You can use it together with links, navs, etc.
- Cras justo odio
- Dapibus ac facilisis in 4
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros 7
Contextual alternatives
You can specify the color of the badge using contextual classes.
Table of badge classes
| Name | Badge | Class |
|---|---|---|
| Primary | 1 | .badge.badge-primary |
| Secondary | Default | 1 | .badge.badge-secondary | .badge.badge-default |
| Success | 3 | .badge.badge-success |
| Info | 7 | .badge.badge-info |
| Warning | 2 | .badge.badge-warning |
| Danger | 4 | .badge.badge-danger |
| Dark | 8 | .badge.badge-dark |
| Light | 3 | .badge.badge-light |