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