Badges

A small count and labeling component. Please read the official Bootstrap documentation for a full list of options.

Primary Secondary Success Danger Warning Info Light Dark Primary Secondary Success Danger Warning Info Light Dark

Soft Dashkit only

Creates a soft variant of a corresponding contextual badge variation. These can be used exactly like Bootstrap's core badges, including modiying classes like .rounded-pill, as an <a> itself, or inside of <button> or <a> elements.

Primary Secondary Success Info Warning Danger Light Dark
<span class="badge bg-primary-soft">Primary</span>
<span class="badge bg-secondary-soft">Secondary</span>
<span class="badge bg-success-soft">Success</span>
<span class="badge bg-info-soft">Info</span>
<span class="badge bg-warning-soft">Warning</span>
<span class="badge bg-danger-soft">Danger</span>
<span class="badge bg-light-soft">Light</span>
<span class="badge bg-dark-soft">Dark</span>