Badges

  1. UI Elements
  2. Badges

Default Badges

Primary Secondary Success Info Warning Purple Danger Dark Light 
<div class="d-flex flex-wrap gap-2">
    <span class="badge bg-primary">Primary</span>
    <span class="badge bg-secondary">Secondary</span>
    <span class="badge bg-success">Success</span>
    <span class="badge bg-info">Info</span>
    <span class="badge bg-warning">Warning</span>
    <span class="badge bg-purple">Purple</span>
    <span class="badge bg-danger">Danger</span>
    <span class="badge bg-dark">Dark</span>
    <span class="badge bg-light">Light</span>
</div>

Soft Badges

Primary Secondary Success Info Warning Purple Danger Dark Light 
<div class="d-flex flex-wrap gap-2">
    <span class="badge badge-soft-primary">Primary</span>
    <span class="badge badge-soft-secondary">Secondary</span>
    <span class="badge badge-soft-success">Success</span>
    <span class="badge badge-soft-info">Info</span>
    <span class="badge badge-soft-warning">Warning</span>
    <span class="badge badge-soft-purple">Purple</span>
    <span class="badge badge-soft-danger">Danger</span>
    <span class="badge badge-soft-dark">Dark</span>
    <span class="badge badge-soft-light">Light</span>
</div>

Outline Badges

Primary Secondary Success Info Warning Purple Danger Dark Light 
<div class="d-flex flex-wrap gap-2">
    <span class="badge badge-outline-primary">Primary</span>
    <span class="badge badge-outline-secondary">Secondary</span>
    <span class="badge badge-outline-success">Success</span>
    <span class="badge badge-outline-info">Info</span>
    <span class="badge badge-outline-warning">Warning</span>
    <span class="badge badge-outline-purple">Purple</span>
    <span class="badge badge-outline-danger">Danger</span>
    <span class="badge badge-outline-dark">Dark</span>
    <span class="badge badge-outline-light">Light</span>
</div>

Pill Badges

Primary Secondary Success purple Info Warning Danger Dark Light 
<div class="d-flex flex-wrap gap-2">
    <span class="badge rounded-pill bg-primary">Primary</span>
    <span class="badge rounded-pill bg-secondary">Secondary</span>
    <span class="badge rounded-pill bg-success">Success</span>
    <span class="badge rounded-pill bg-purple">purple</span>
    <span class="badge rounded-pill bg-info">Info</span>
    <span class="badge rounded-pill bg-warning">Warning</span>
    <span class="badge rounded-pill bg-danger">Danger</span>
    <span class="badge rounded-pill bg-dark">Dark</span>
    <span class="badge rounded-pill bg-light">Light</span>
</div>

Pill Soft Badges

Primary Secondary Success Info Warning Purple Danger Dark Light 
<div class="d-flex flex-wrap gap-2">
    <span class="badge rounded-pill bg-primary">Primary</span>
    <span class="badge rounded-pill bg-secondary">Secondary</span>
    <span class="badge rounded-pill bg-success">Success</span>
    <span class="badge rounded-pill bg-purple">purple</span>
    <span class="badge rounded-pill bg-info">Info</span>
    <span class="badge rounded-pill bg-warning">Warning</span>
    <span class="badge rounded-pill bg-danger">Danger</span>
    <span class="badge rounded-pill bg-dark">Dark</span>
    <span class="badge rounded-pill bg-light">Light</span>
</div>

Pill Outline Badges

Primary Secondary Success Info Warning Purple Danger Dark Light 
<div class="d-flex flex-wrap gap-2">
    <span class="badge rounded-pill bg-primary">Primary</span>
    <span class="badge rounded-pill bg-secondary">Secondary</span>
    <span class="badge rounded-pill bg-success">Success</span>
    <span class="badge rounded-pill bg-purple">purple</span>
    <span class="badge rounded-pill bg-info">Info</span>
    <span class="badge rounded-pill bg-warning">Warning</span>
    <span class="badge rounded-pill bg-danger">Danger</span>
    <span class="badge rounded-pill bg-dark">Dark</span>
    <span class="badge rounded-pill bg-light">Light</span>
</div>

Buttons with Badges

<div class="d-flex flex-wrap gap-3">
    <button type="button" class="btn btn-primary">
    Notifications <span class="badge bg-success ms-1">4</span>
    </button>
    <button type="button" class="btn btn-success">
    Messages <span class="badge bg-danger ms-1">2</span>
    </button>
    <button type="button" class="btn btn-outline-secondary">
    Draft <span class="badge bg-success ms-1">2</span>
    </button>
</div>

Badges Position Examples

<div class="d-flex flex-wrap gap-3">
    <button type="button" class="btn btn-primary position-relative">
    Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-success">+99 
    <span class="visually-hidden">unread messages</span></span>
    </button>

    <button type="button" class="btn btn-light position-relative">
    Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle 
    bg-danger p-1"><span class="visually-hidden">unread messages</span></span>
    </button>

    <button type="button" class="btn btn-primary position-relative p-0 avatar-sm rounded">
    <span class="avatar-title bg-transparent">
        <i class="bx bxs-envelope"></i>
    </span>
    <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle 
    bg-danger p-1"><span class="visually-hidden">unread messages</span></span>
    </button>

    <button type="button" class="btn btn-light position-relative p-0 avatar-sm rounded-circle">
    <span class="avatar-title bg-transparent text-reset">
        <i class="bx bxs-bell"></i>
    </span>
    </button>

    <button type="button" class="btn btn-light position-relative p-0 avatar-sm rounded-circle">
    <span class="avatar-title bg-transparent text-reset">
        <i class="bx bx-menu"></i>
    </span>
    <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle 
    bg-success p-1"><span class="visually-hidden">unread messages</span></span>
    </button>
</div>
© Probic.
Crafted with by Themesdesign