Badges
Use the .badge class to create a badge. You can also use the
Badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<span class="badge rounded text-bg-primary">Primary</span>
<span class="badge rounded text-bg-secondary">Secondary</span>
<span class="badge rounded text-bg-success">Success</span>
<span class="badge rounded text-bg-danger">Danger</span>
<span class="badge rounded text-bg-warning">Warning</span>
<span class="badge rounded text-bg-info">Info</span>
<span class="badge rounded text-bg-light">Light</span>
<span class="badge rounded text-bg-dark">Dark</span>
Light Badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<span class="badge rounded bg-primary-subtle">Primary</span>
<span class="badge rounded bg-secondary-subtle text-body">Secondary</span>
<span class="badge rounded bg-success-subtle">Success</span>
<span class="badge rounded bg-danger-subtle">Danger</span>
<span class="badge rounded bg-warning-subtle">Warning</span>
<span class="badge rounded bg-info-subtle">Info</span>
<span class="badge rounded bg-light-subtle text-body">Light</span>
<span class="badge rounded bg-dark-subtle">Dark</span>
Pill Badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<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-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>
Light Pill Badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<span class="badge bg-primary-subtle">Primary</span>
<span class="badge bg-secondary-subtle text-body">Secondary</span>
<span class="badge bg-success-subtle">Success</span>
<span class="badge bg-danger-subtle">Danger</span>
<span class="badge bg-warning-subtle">Warning</span>
<span class="badge bg-info-subtle">Info</span>
<span class="badge bg-light-subtle text-body">Light</span>
<span class="badge bg-dark-subtle">Dark</span>
Outline Badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<span class="badge rounded border border-primary text-primary">Primary</span>
<span class="badge rounded border border-secondary text-secondary">Secondary</span>
<span class="badge rounded border border-success text-success">Success</span>
<span class="badge rounded border border-danger text-danger">Danger</span>
<span class="badge rounded border border-warning text-warning">Warning</span>
<span class="badge rounded border border-info text-info">Info</span>
<span class="badge rounded border border-light text-body">Light</span>
<span class="badge rounded border border-dark text-dark">Dark</span>
Outline Pill Badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<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-danger text-danger">Danger</span>
<span class="badge border border-warning text-warning">Warning</span>
<span class="badge border border-info text-info">Info</span>
<span class="badge border border-light text-body">Light</span>
<span class="badge border border-dark text-dark">Dark</span>
Button with Badges
<button type="button" class="btn btn-primary">
Notifications <span class="badge text-bg-secondary">4</span>
</button>
<button type="button" class="btn btn-success">
Notifications <span class="badge text-bg-secondary">4</span>
</button>
<button type="button" class="btn btn-danger">
Notifications <span class="badge text-bg-secondary">4</span>
</button>
<button type="button" class="btn btn-warning">
Notifications <span class="badge text-bg-secondary">4</span>
</button>
<button type="button" class="btn btn-info">
Notifications <span class="badge text-bg-secondary">4</span>
</button>
<button type="button" class="btn btn-light">
Notifications <span class="badge text-bg-secondary">4</span>
</button>
<button type="button" class="btn btn-dark">
Notifications <span class="badge text-bg-secondary">4</span>
</button>
Outline Button with Badges
<button type="button" class="btn btn-outline-primary">
Notifications <span class="badge text-bg-secondary">4</span>
</button>
<button type="button" class="btn btn-outline-success">
Notifications <span class="badge text-bg-secondary">4</span>
</button>
<button type="button" class="btn btn-outline-danger">
Notifications <span class="badge text-bg-secondary">4</span>
</button>
<button type="button" class="btn btn-outline-warning">
Notifications <span class="badge text-bg-secondary">4</span>
</button>
<button type="button" class="btn btn-outline-info">
Notifications <span class="badge text-bg-secondary">4</span>
</button>
<button type="button" class="btn btn-outline-light">
Notifications <span class="badge text-bg-secondary">4</span>
</button>
<button type="button" class="btn btn-outline-dark">
Notifications <span class="badge text-bg-secondary">4</span>
</button>
Position Badges
<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>
Heading with Badge
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>