Badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<div class="d-flex gap-2 flex-wrap">
<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>
</div>
Primary
Secondary
Success
Danger
Warning
Info
Dark
<div class="d-flex gap-2 flex-wrap">
<span class="badge text-outline-primary">Primary</span>
<span class="badge text-outline-secondary">Secondary</span>
<span class="badge text-outline-success">Success</span>
<span class="badge text-outline-danger">Danger</span>
<span class="badge text-outline-warning">Warning</span>
<span class="badge text-outline-info">Info</span>
<span class="badge text-outline-dark">Dark</span>
</div>
Primary
Secondary
Success
Danger
Warning
Info
Dark
<div class="d-flex gap-2 flex-wrap">
<span class="badge text-light-primary"> <i class="ti ti-download me-1"></i>Primary</span>
<span class="badge text-light-secondary">Secondary</span>
<span class="badge text-light-success">Success</span>
<span class="badge text-light-danger">Danger</span>
<span class="badge text-light-warning">Warning</span>
<span class="badge text-light-info">Info</span>
<span class="badge text-light-dark">Dark</span>
</div>
Primary
Secondary
Success
Danger
<div class="d-flex gap-2 flex-wrap">
<span class="badge text-bg-primary b-r-0">Primary</span>
<span class="badge text-bg-secondary b-r-6">Secondary</span>
<span class="badge text-bg-success b-r-8">Success</span>
<span class="badge text-bg-danger b-r-10">Danger</span>
</div>
<div class="d-flex gap-3 flex-wrap">
<button type="button" class="btn btn-outline-danger position-relative">
Offline
<span
class="position-absolute top-0 start-0 translate-middle p-1 bg-danger border border-light rounded-circle">
<span class="visually-hidden">Offline</span>
</span>
</button>
<button type="button" class="btn btn-outline-warning position-relative">
Busy
<span
class="position-absolute top-0 start-100 translate-middle p-1 bg-warning border border-light rounded-circle">
<span class="visually-hidden">Busy</span>
</span>
</button>
<button type="button" class="btn btn-outline-success position-relative">
Online
<span
class="position-absolute top-100 start-0 translate-middle p-1 bg-success border border-light rounded-circle">
<span class="visually-hidden">Online</span>
</span>
</button>
<button type="button" class="btn btn-outline-secondary position-relative">
Disable
<span
class="position-absolute top-100 start-100 translate-middle p-1 bg-secondary border border-light rounded-circle">
<span class="visually-hidden">Disable</span>
</span>
</button>
</div>
<div class="d-flex gap-3 flex-wrap">
<button type="button" class="btn btn-outline-danger position-relative">
Offline
<span
class="position-absolute top-0 start-0 translate-middle p-1 bg-danger border border-light rounded-circle">
<span class="visually-hidden">Offline</span>
</span>
</button>
<button type="button" class="btn btn-outline-warning position-relative">
Busy
<span
class="position-absolute top-0 start-100 translate-middle p-1 bg-warning border border-light rounded-circle">
<span class="visually-hidden">Busy</span>
</span>
</button>
<button type="button" class="btn btn-outline-success position-relative">
Online
<span
class="position-absolute top-100 start-0 translate-middle p-1 bg-success border border-light rounded-circle">
<span class="visually-hidden">Online</span>
</span>
</button>
<button type="button" class="btn btn-outline-secondary position-relative">
Disable
<span
class="position-absolute top-100 start-100 translate-middle p-1 bg-secondary border border-light rounded-circle">
<span class="visually-hidden">Disable</span>
</span>
</button>
</div>
<div class="d-flex gap-4 flex-wrap">
<button type="button" class="btn btn-light-primary">
Notifications <span class="badge text-bg-primary badge-notification">4</span>
</button>
<button type="button" class="btn btn-light-secondary position-relative">
Disable
<span
class="position-absolute top-0 start-100 translate-middle p-2 bg-secondary border border-light rounded-circle">
<span class="visually-hidden">Disable</span>
</span>
</button>
<button type="button" class="btn btn-light-success position-relative">
Inbox
<span
class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-success badge-notification">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>
<button type="button" class="btn btn-light-danger position-relative">
Unread
<span
class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger badge-notification">
<i class="ti ti-bell-ringing"></i>
</span>
</button>
<button type="button" class="btn btn-outline-warning position-relative">
Inbox
<span class="badge rounded-pill bg-warning badge-notification">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>
<button type="button" class="btn btn-light-info position-relative f-s-14">
<b>50%</b> Off
<span
class="position-absolute top-0 start-100 translate-middle bg-info b-r-6 badge-notification p-1 f-s-12">
New
</span>
</button>
<button type="button" class="btn btn-light-dark position-relative">
<b> 1 </b> missed call
<span
class="position-absolute top-0 start-100 translate-middle p-2 bg-dark border border-light rounded-circle animate__animated animate__fadeIn animate__infinite animate__slower">
<span class="visually-hidden">Busy</span>
</span>
</button>
</div>
Heading New
Heading New
Heading New
Heading New
Heading New
Heading New
<div class="">
<h1 class="mb-3">Example heading <span class="badge bg-secondary">New</span></h1>
<h2 class="mb-3">Example heading <span class="badge bg-secondary">New</span></h2>
<h3 class="mb-3">Example heading <span class="badge bg-secondary">New</span></h3>
<h4 class="mb-3">Example heading <span class="badge bg-secondary">New</span></h4>
<h5 class="mb-3">Example heading <span class="badge bg-secondary">New</span></h5>
<h6 class="mb-3">Example heading <span class="badge bg-secondary">New</span></h6>
</div>