Badges
Badge Background Colors
<span class="badge fs-13 fw-normal py-2 px-3 bg-primary">Primary</span>
<span class="badge fs-13 fw-normal py-2 px-3 bg-secondary">Secondary</span>
<span class="badge fs-13 fw-normal py-2 px-3 bg-success">Success</span>
<span class="badge fs-13 fw-normal py-2 px-3 bg-danger">Danger</span>
<span class="badge fs-13 fw-normal py-2 px-3 bg-warning">Warning</span>
<span class="badge fs-13 fw-normal py-2 px-3 bg-info">Info</span>
<span class="badge fs-13 fw-normal py-2 px-3 bg-light">Light</span>
<span class="badge fs-13 fw-normal py-2 px-3 bg-dark">Dark</span>
Light Background Badge
<span class="badge fs-13 fw-normal py-2 px-3 text-primary bg-primary-transparent">Primary</span>
<span class="badge fs-13 fw-normal py-2 px-3 text-secondary bg-secondary-transparent">Secondary</span>
<span class="badge fs-13 fw-normal py-2 px-3 text-success bg-success-transparent">Success</span>
<span class="badge fs-13 fw-normal py-2 px-3 text-danger bg-danger-transparent">Danger</span>
<span class="badge fs-13 fw-normal py-2 px-3 text-warning bg-warning-transparent">Warning</span>
<span class="badge fs-13 fw-normal py-2 px-3 text-info bg-info-transparent">Info</span>
<span class="badge fs-13 fw-normal py-2 px-3 text-light bg-light-transparent">Light</span>
<span class="badge fs-13 fw-normal py-2 px-3 text-dark bg-dark-transparent">Dark</span>
Outline Badges
<span class="badge fs-13 fw-normal py-2 px-3 text-primary border-primary border">Primary</span>
<span class="badge fs-13 fw-normal py-2 px-3 text-secondary border-secondary border">Secondary</span>
<span class="badge fs-13 fw-normal py-2 px-3 text-success border-success border">Success</span>
<span class="badge fs-13 fw-normal py-2 px-3 text-danger border-danger border">Danger</span>
<span class="badge fs-13 fw-normal py-2 px-3 text-warning border-warning border">Warning</span>
<span class="badge fs-13 fw-normal py-2 px-3 text-info border-info border">Info</span>
<span class="badge fs-13 fw-normal py-2 px-3 text-light border-light border">Light</span>
<span class="badge fs-13 fw-normal py-2 px-3 text-dark border-dark border">Dark</span>
Outline Badges
<a href="#" class="badge fs-13 fw-normal py-2 px-2 text-primary border-primary border text-decoration-none">
<span>Primary</span>
<span class="bg-primary text-white d-inline-block py-1 px-2 ms-2 rounded-1">1</span>
</a>
<a href="#" class="badge fs-13 fw-normal py-2 px-2 text-secondary border-secondary border text-decoration-none">
<span>Secondary</span>
<span class="bg-secondary text-white d-inline-block py-1 px-2 ms-2 rounded-1">1</span>
</a>
<a href="#" class="badge fs-13 fw-normal py-2 px-2 text-success border-success border text-decoration-none">
<span>Success</span>
<span class="bg-success text-white d-inline-block py-1 px-2 ms-2 rounded-1">1</span>
</a>
<a href="#" class="badge fs-13 fw-normal py-2 px-2 text-danger border-danger border text-decoration-none">
<span>Danger</span>
<span class="bg-danger text-white d-inline-block py-1 px-2 ms-2 rounded-1">1</span>
</a>
<a href="#" class="badge fs-13 fw-normal py-2 px-2 text-warning border-warning border text-decoration-none">
<span>Warning</span>
<span class="bg-warning text-white d-inline-block py-1 px-2 ms-2 rounded-1">1</span>
</a>
<a href="#" class="badge fs-13 fw-normal py-2 px-2 text-info border-info border text-decoration-none">
<span>Info</span>
<span class="bg-info text-white d-inline-block py-1 px-2 ms-2 rounded-1">1</span>
</a>
<a href="#" class="badge fs-13 fw-normal py-2 px-2 text-dark border-dark border text-decoration-none">
<span>Dark</span>
<span class="bg-dark text-white d-inline-block py-1 px-2 ms-2 rounded-1">1</span>
</a>
Badge Square
<span class="badge rounded-0 fs-13 fw-normal py-2 px-3 bg-primary">Primary</span>
<span class="badge rounded-0 fs-13 fw-normal py-2 px-3 bg-secondary">Secondary</span>
<span class="badge rounded-0 fs-13 fw-normal py-2 px-3 bg-success">Success</span>
<span class="badge rounded-0 fs-13 fw-normal py-2 px-3 bg-danger">Danger</span>
<span class="badge rounded-0 fs-13 fw-normal py-2 px-3 bg-warning">Warning</span>
<span class="badge rounded-0 fs-13 fw-normal py-2 px-3 bg-info">Info</span>
<span class="badge rounded-0 fs-13 fw-normal py-2 px-3 bg-light">Light</span>
<span class="badge rounded-0 fs-13 fw-normal py-2 px-3 bg-dark">Dark</span>
Badge Pill
<span class="badge fs-13 fw-normal py-2 px-3 text-primary bg-primary-transparent">Primary</span>
<span class="badge fs-13 fw-normal py-2 px-3 text-secondary bg-secondary-transparent">Secondary</span>
<span class="badge fs-13 fw-normal py-2 px-3 text-success bg-success-transparent">Success</span>
<span class="badge fs-13 fw-normal py-2 px-3 text-danger bg-danger-transparent">Danger</span>
<span class="badge fs-13 fw-normal py-2 px-3 text-warning bg-warning-transparent">Warning</span>
<span class="badge fs-13 fw-normal py-2 px-3 text-info bg-info-transparent">Info</span>
<span class="badge fs-13 fw-normal py-2 px-3 text-light bg-light-transparent">Light</span>
<span class="badge fs-13 fw-normal py-2 px-3 text-dark bg-dark-transparent">Dark</span>
Badges Outline pill
<span class="badge rounded-pill fs-13 fw-normal py-2 px-3 text-primary border-primary border">Primary</span>
<span class="badge rounded-pill fs-13 fw-normal py-2 px-3 text-secondary border-secondary border">Secondary</span>
<span class="badge rounded-pill fs-13 fw-normal py-2 px-3 text-success border-success border">Success</span>
<span class="badge rounded-pill fs-13 fw-normal py-2 px-3 text-danger border-danger border">Danger</span>
<span class="badge rounded-pill fs-13 fw-normal py-2 px-3 text-warning border-warning border">Warning</span>
<span class="badge rounded-pill fs-13 fw-normal py-2 px-3 text-info border-info border">Info</span>
<span class="badge rounded-pill fs-13 fw-normal py-2 px-3 text-light border-light border">Light</span>
<span class="badge rounded-pill fs-13 fw-normal py-2 px-3 text-dark border-dark border">Dark</span>
Badge Background Pill
<span class="badge rounded-pill fs-13 fw-normal py-2 px-3 bg-primary">Primary</span>
<span class="badge rounded-pill fs-13 fw-normal py-2 px-3 bg-secondary">Secondary</span>
<span class="badge rounded-pill fs-13 fw-normal py-2 px-3 bg-success">Success</span>
<span class="badge rounded-pill fs-13 fw-normal py-2 px-3 bg-danger">Danger</span>
<span class="badge rounded-pill fs-13 fw-normal py-2 px-3 bg-warning">Warning</span>
<span class="badge rounded-pill fs-13 fw-normal py-2 px-3 bg-info">Info</span>
<span class="badge rounded-pill fs-13 fw-normal py-2 px-3 bg-light">Light</span>
<span class="badge rounded-pill fs-13 fw-normal py-2 px-3 bg-dark">Dark</span>
Badge Heading
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<h1>Example heading <span class="badge bg-primary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-success">New</span></h3>
<h4>Example heading <span class="badge bg-danger">New</span></h4>
<h5>Example heading <span class="badge bg-info">New</span></h5>
<h6>Example heading <span class="badge bg-dark">New</span></h6>
Badge Others
<button type="button" class="btn btn-primary fs-14 fw-normal py-2 px-3">
Notifications <span class="badge text-bg-secondary">4</span>
</button>
<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>
<button type="button" class="btn btn-primary position-relative">
Profile
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</button>