Badge

Documentation and examples for badges, our small count and labeling component.

Bootstrap Documentation

Examples

Text

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>

Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.

Primary Secondary Success Danger Warning Info Dark

Icon

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

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

Warning
<span class="badge badge-warning badge-pill">
    Warning
</span>

Circle

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

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