Boomerang UI Kit - Free Bootstrap Framework by Webpixels

Badges

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

Open Bootstrap Docs

Examples

                  Primary
                  Secondary
                  Tertiary
                  Success
                  Danger
                  Warning
                  Info
                

<span class="badge badge-lg badge-pill badge-primary text-uppercase">Primary</span>
<span class="badge badge-lg badge-pill badge-secondary text-uppercase">Secondary</span>
<span class="badge badge-lg badge-pill badge-tertiary text-uppercase">Tertiary</span>
<span class="badge badge-lg badge-pill badge-success text-uppercase">Success</span>
<span class="badge badge-lg badge-pill badge-danger text-uppercase">Danger</span>
<span class="badge badge-lg badge-pill badge-warning text-uppercase">Warning</span>
<span class="badge badge-lg badge-pill badge-info text-uppercase">Info</span>

Additional Class Reference

.badge-md: Apply to .badge to increase its size to medium

.badge-lg: Apply to .badge to increase its size to large

Dot badges

<span class="badge badge-dot mr-4">
    <i class="bg-green"></i> paid
</span>
<span class="badge badge-dot mr-4">
    <i class="bg-warning"></i> pending
</span>
<span class="badge badge-dot mr-4">
    <i class="bg-blue"></i> finished
</span>

Badge counter

<button type="button" class="btn btn-primary">
    Notifications <span class="badge badge-light ml-2">4</span>
</button>