Badges

A small count and labeling component.

Bootstrap Documentation

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
Primary Secondary Success Danger Warning Info Dark Light
Primary Secondary Success Danger Warning Info Dark Light

Soft

Goodkit 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>