Default badge
Simply use class badge-default
Primary badge
Simply use class badge-primary
Success badge
Simply use class badge-success
Info badge
Simply use class badge-info
Warning badge
Simply use class badge-warning
Danger badge
Simply use class badge-danger
Danger outline badge
Simply use class badge-outline-danger
Warning outline badge
Simply use class badge-outline-warning
Info outline badge
Simply use class badge-outline-info
Success outline badge
Simply use class badge-outline-success
Primary outline badge
Simply use class badge-outline-primary
Default outline badge
Simply use class badge-outline-default
Badge with others
The following examples are some cases but not the only ones on how this component can be composed with others.List group
Simply use class badge-{modifier}
- 16 Messages
Buttons
Simply use class badge-{modifier}
Outline buttons
Simply use class badge-{modifier}
Badge with arrow
With arrows of all sizes
small default largeOutline badge with arrow
With arrows of all sizes
small default largeAbove another element
Simply use class badge-above
Above another element
Simply use class right
Above another element
Simply use class badge-above
Above another element
Simply use class right
Badge with animate.css
When you scroll to the bottom of this page.
64Badge with animate.css
When you scroll to the bottom of this page.
64quadrant - equal to one quarter of a circle