Documentation and examples for badges, our small count and labeling component.
Example
Badges can be used as part of links or buttons to provide a counter.
Unread messages
24
Notifications
4
Contextual variations
Add any of the below mentioned modifier classes to change the appearance of a badge.
Default
Primary
Secondary
Info
Success
Danger
Warning
<span class= "badge badge-default" > Default</span>
<span class= "badge badge-primary" > Primary</span>
<span class= "badge badge-secondary" > Secondary</span>
<span class= "badge badge-info" > Info</span>
<span class= "badge badge-success" > Success</span>
<span class= "badge badge-danger" > Danger</span>
<span class= "badge badge-warning" > Warning</span>
Pill badges
Use the .badge-pill
modifier class to make badges more rounded (with a larger border-radius
and additional horizontal padding
). Useful if you miss the badges from v3.
Default
Primary
Secondary
Info
Success
Danger
Warning
<span class= "badge badge-pill badge-default" > Default</span>
<span class= "badge badge-pill badge-primary" > Primary</span>
<span class= "badge badge-pill badge-secondary" > Secondary</span>
<span class= "badge badge-pill badge-info" > Info</span>
<span class= "badge badge-pill badge-success" > Success</span>
<span class= "badge badge-pill badge-danger" > Danger</span>
<span class= "badge badge-pill badge-warning" > Warning</span>
Links
Using the contextual .badge-*
classes on an <a>
element quickly provide actionable badges with hover and focus states.
<a href= "#" class= "badge badge-pill badge-default" > Default</a>
<a href= "#" class= "badge badge-pill badge-primary" > Primary</a>
<a href= "#" class= "badge badge-pill badge-secondary" > Secondary</a>
<a href= "#" class= "badge badge-pill badge-info" > Info</a>
<a href= "#" class= "badge badge-pill badge-success" > Success</a>
<a href= "#" class= "badge badge-pill badge-danger" > Danger</a>
<a href= "#" class= "badge badge-pill badge-warning" > Warning</a>
Sizes
Use the .badge-md
or .badge-lg
modifier classes to adjust badge sizes.
Default
Medium
Large badge
<span class= "badge badge-pill badge-primary" > Default</span>
<span class= "badge badge-pill badge-md badge-warning" > Medium</span>
<span class= "badge badge-pill badge-lg badge-success" > Large badge</span>