Use the badge class to set a default badge.

<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-info">Info</span>

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

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

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

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

Use the badge-soft- class with the below-mentioned variation to create a softer badge.

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

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

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

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

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

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

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

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

Use the badge-outline- class with the below-mentioned variation to create a badge with the outline.

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

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

<span class="badge badge-outline-light">Light</span>

Use the rounded-pill class to make badges more rounded with a larger border-radius.

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

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

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

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

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

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

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

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

Use the rounded-pill badge-soft- class with the below-mentioned variation to create a badge more rounded with a soft background.

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

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

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

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

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

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

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

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

Use the badge-border and badge-soft- with below mentioned modifier classes to make badges with border & soft backgorund.

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

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

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

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

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

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

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

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

Use the rounded-pill badge-outline- class with the below-mentioned variation to create a outline Pill badge.

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

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

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

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

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

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

<span class="badge rounded-pill badge-outline-dark">Dark</span>

<span class="badge rounded-pill badge-outline-light">Light</span>

Use the badge-label class to create a badge with the label.

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

Use the badge-gradient-* class to create a gradient styled badge.

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

Use the below utilities to modify a badge and position it in the corner of a link or button.

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

Badges can be used as part of buttons to provide a counter.

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

Example of the badge used in the HTML 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 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>