<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-danger">Danger</span> 

 <span class="badge bg-dark">Dark</span> 

 <span class="badge bg-light text-body">Light</span> 

 <span class="badge bg-primary-subtle text-primary">Primary</span> 

 <span class="badge bg-secondary-subtle text-secondary">Secondary</span> 

 <span class="badge bg-success-subtle text-success">Success</span> 

 <span class="badge bg-info-subtle text-info">Info</span> 

 <span class="badge bg-warning-subtle text-warning">Warning</span> 

 <span class="badge bg-danger-subtle text-danger">Danger</span> 

 <span class="badge bg-dark-subtle text-body">Dark</span> 

 <span class="badge bg-light-subtle text-body">Light</span> 

 <span class="badge border border-primary text-primary">Primary</span> 

 <span class="badge border border-secondary text-secondary">Secondary</span> 

 <span class="badge border border-success text-success">Success</span> 

 <span class="badge border border-info text-info">Info</span> 

 <span class="badge border border-warning text-warning">Warning</span> 

 <span class="badge border border-danger text-danger">Danger</span> 

 <span class="badge border border-dark text-body">Dark</span> 

 <span class="badge border border-light text-body">Light</span> 

 <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-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 text-body">Light</span> 

 <span class="badge rounded-pill bg-primary-subtle text-primary">Primary</span> 

 <span class="badge rounded-pill bg-secondary-subtle text-secondary">Secondary</span> 

 <span class="badge rounded-pill bg-success-subtle text-success">Success</span> 

 <span class="badge rounded-pill bg-info-subtle text-info">Info</span> 

 <span class="badge rounded-pill bg-warning-subtle text-warning">Warning</span> 

 <span class="badge rounded-pill bg-danger-subtle text-danger">Danger</span> 

 <span class="badge rounded-pill bg-dark-subtle text-body">Dark</span> 

 <span class="badge rounded-pill bg-light-subtle text-body">Light</span> 

 <span class="badge bg-primary-subtle text-primary badge-border">Primary</span> 

 <span class="badge bg-secondary-subtle text-secondary badge-border">Secondary</span> 

 <span class="badge bg-success-subtle text-success badge-border">Success</span> 

 <span class="badge bg-info-subtle text-info badge-border">Info</span> 

 <span class="badge bg-warning-subtle text-warning badge-border">Warning</span> 

 <span class="badge bg-danger-subtle text-danger badge-border">Danger</span> 

 <span class="badge bg-dark-subtle text-body badge-border">Dark</span> 

 <span class="badge bg-light-subtle text-body badge-border">Light</span> 

 <span class="badge rounded-pill border border-primary text-primary">Primary</span> 

 <span class="badge rounded-pill border border-secondary text-secondary">Secondary</span> 

 <span class="badge rounded-pill border border-success text-success">Success</span> 

 <span class="badge rounded-pill border border-info text-info">Info</span> 

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

 <span class="badge rounded-pill border border-danger text-danger">Danger</span> 

 <span class="badge rounded-pill border border-dark text-body">Dark</span> 

 <span class="badge rounded-pill border border-light text-body">Light</span> 

 <span class="badge badge-label bg-primary"><i class="mdi mdi-circle-medium"></i> Primary</span> 

 <span class="badge badge-label bg-secondary"><i class="mdi mdi-circle-medium"></i> Secondary</span> 

 <span class="badge badge-label bg-success"><i class="mdi mdi-circle-medium"></i> Success</span> 

 <span class="badge badge-label bg-danger"><i class="mdi mdi-circle-medium"></i> Danger</span> 

 <span class="badge badge-label bg-warning"><i class="mdi mdi-circle-medium"></i> Warning</span> 

 <span class="badge badge-label bg-info"><i class="mdi mdi-circle-medium"></i> Info</span> 

 <span class="badge badge-label bg-dark"><i class="mdi mdi-circle-medium"></i> Dark</span> \

 <span class="badge badge-label bg-light"><i class="mdi mdi-circle-medium"></i> Light</span> 

 <span class="badge badge-gradient-primary">Primary</span> 

 <span class="badge badge-gradient-secondary">Secondary</span> 

 <span class="badge badge-gradient-success">Success</span> 

 <span class="badge badge-gradient-danger">Danger</span> 

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

 <span class="badge badge-gradient-info">Info</span> 

 <span class="badge badge-gradient-dark">Dark</span> 

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

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

 <h1>Example heading <span class="badge text-bg-secondary">New</span></h1> 

 <h2>Example heading <span class="badge text-bg-secondary">New</span></h2> 

 <h3>Example heading <span class="badge text-bg-secondary">New</span></h3> 

 <h4>Example heading <span class="badge text-bg-secondary">New</span></h4> 

 <h5>Example heading <span class="badge text-bg-secondary">New</span></h5> 

 <h6>Example heading <span class="badge text-bg-secondary">New</span></h6>