Badge
Documentation and examples for badges, our small count and labeling component.
Examples
Text
Show code
Primary Secondary Success Danger Warning Info Dark
<span class="badge badge-primary">
Primary
</span>
<span class="badge badge-secondary">
Secondary
</span>
<span class="badge badge-success">
Success
</span>
<span class="badge badge-danger">
Danger
</span>
<span class="badge badge-warning">
Warning
</span>
<span class="badge badge-info">
Info
</span>
<span class="badge badge-dark">
Dark
</span>Links
Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.
Show code
<a href="#" class="badge badge-primary">
Primary
</a>
<a href="#" class="badge badge-secondary">
Secondary
</a>
<a href="#" class="badge badge-success">
Success
</a>
<a href="#" class="badge badge-danger">
Danger
</a>
<a href="#" class="badge badge-warning">
Warning
</a>
<a href="#" class="badge badge-info">
Info
</a>
<a href="#" class="badge badge-dark">
Dark
</a>Icon
Show code
Primary Secondary Success Danger Warning Info Dark
<span class="badge badge-primary">
<i data-feather="check"></i>Primary
</span>
<span class="badge badge-secondary">
<i data-feather="check"></i>Secondary
</span>
<span class="badge badge-success">
<i data-feather="check"></i>Success
</span>
<span class="badge badge-danger">
<i data-feather="check"></i>Danger
</span>
<span class="badge badge-warning">
<i data-feather="check"></i>Warning
</span>
<span class="badge badge-info">
<i data-feather="check"></i>Info
</span>
<span class="badge badge-dark">
<i data-feather="check"></i>Dark
</span>Colors
Soft
Show code
Soft primary Soft secondary Soft success Soft danger Soft warning Soft info Soft dark
<span class="badge badge-soft-primary">
Soft primary
</span>
<span class="badge badge-soft-secondary">
Soft secondary
</span>
<span class="badge badge-soft-success">
Soft success
</span>
<span class="badge badge-soft-danger">
Soft danger
</span>
<span class="badge badge-soft-warning">
Soft warning
</span>
<span class="badge badge-soft-info">
Soft info
</span>
<span class="badge badge-soft-dark">
Soft dark
</span>Shapes
Pills
Circle
Show code
3 3 3 3 3 3 3
<span class="badge badge-primary badge-circle">
3
</span>
<span class="badge badge-secondary badge-circle">
3
</span>
<span class="badge badge-success badge-circle">
3
</span>
<span class="badge badge-danger badge-circle">
3
</span>
<span class="badge badge-warning badge-circle">
3
</span>
<span class="badge badge-info badge-circle">
3
</span>
<span class="badge badge-dark badge-circle">
3
</span>Sizing
Show code
Warning Warning Warning
<span class="badge badge-warning">
Warning
</span>
<span class="badge badge-warning badge-md">
Warning
</span>
<span class="badge badge-warning badge-lg">
Warning
</span>