Badges
Dashboard Badges
Basic examples

Badges can be used as part of links or buttons to provide a counter. e.g .badge .badge-primary to span element

Badge variations

use classes .badge .badge-color* on span

Primary Secondary Success Danger Warning Info Light Dark
Badge variations with padding

use bootstrap padding p-* classes along with .badge class

Primary Secondary Success Danger Warning Info Light Dark
Pill badges

Use the .badge-pill modifier class to make badges more rounded.

Primary Secondary Success Danger Warning Info Light Dark
Pill badger with padding

use bootstrap padding p-* classes along with .badge .badge-pill classes

Primary Secondary Success Danger Warning Info Light Dark
Links

Using the contextual .badge-* classes on an element quickly provide actionable badges with hover and focus states.

Primary Secondary Success Danger Warning Info Light Dark