Badges

A small count and labeling component.

Bootstrap Documentation

Primary Secondary Success Danger Warning Info Light Dark

Soft

Apcrat Exclusive

Creates a soft variant of a corresponding contextual badge variation. These can be used exactly like Bootstrap's core badges, including modifying classes like .badge-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>

Uppercase

Combine badges with text utilities to get a completely new look.

Primary Primary soft
<span class="badge bg-primary h6 text-uppercase">Primary</span>
<span class="badge bg-primary-soft h6 text-uppercase">Primary soft</span>