Badges
Documentation and examples for badges, our small count and labeling component.
Examples
Example heading New
<h4>Example heading <span class="badge badge-primary btn-rounded">New</span></h4>Pill
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<span class="badge badge-rounded badge-primary">Primary</span>
<span class="badge badge-rounded badge-secondary">Secondary</span>
<span class="badge badge-rounded badge-success">Success</span>
<span class="badge badge-rounded badge-danger">Danger</span>
<span class="badge badge-rounded badge-warning">Warning</span>
<span class="badge badge-rounded badge-info">Info</span>
<span class="badge badge-rounded badge-light">Light</span>
<span class="badge badge-rounded badge-dark">Dark</span>Outline
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<span class="badge badge-rounded badge-outline-primary">Primary</span>
<span class="badge badge-rounded badge-outline-secondary">Secondary</span>
<span class="badge badge-rounded badge-outline-success">Success</span>
<span class="badge badge-rounded badge-outline-danger">Danger</span>
<span class="badge badge-rounded badge-outline-warning">Warning</span>
<span class="badge badge-rounded badge-outline-info">Info</span>
<span class="badge badge-rounded badge-outline-light">Light</span>
<span class="badge badge-rounded badge-outline-dark">Dark</span>