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

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

<!-- Secondary solid alt badge -->
<span class="badge text-body-emphasis bg-body-secondary">Secondary alt</span>

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

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

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

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

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

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

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

<!-- Secondary outline badge -->
<span class="badge text-body-emphasis border">Secondary</span>

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

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

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

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

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

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

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

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

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

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

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

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

<!-- Light subtle badge -->
<span class="badge text-light bg-light bg-opacity-10">Light</span>

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

<!-- Solid badge with icon on the left -->
<span class="badge text-bg-primary d-inline-flex align-items-center">
  <i class="ci-home fs-sm me-1"></i>
  Home
</span>

<!-- Outline badge with icon on the right -->
<span class="badge text-primary border border-primary d-inline-flex align-items-center">
  Favorite
  <i class="ci-heart fs-sm ms-1"></i>
</span>

<!-- Subtle badge with only icon -->
<span class="badge text-primary bg-primary-subtle">
  <i class="ci-trash fs-sm"></i>
</span>

<!-- Use rounded- utility classes to alter border radius of the badge -->

<!-- Rounded (default) -->
<span class="badge text-bg-primary mb-2 me-2">Rounded</span>

<!-- Pill -->
<span class="badge text-bg-primary rounded-pill mb-2 me-2">Pill badge</span>

<!-- Square -->
<span class="badge text-bg-primary rounded-0 mb-2">Square</span>

<!-- Badges scale to match the font size of the immediate parent -->
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>

<!-- Primary button + light badge -->
<button type="button" class="btn btn-primary">
  Notifications
  <span class="badge d-flex text-bg-light ms-2 me-n1">4</span>
</button>

<!-- Dark pill button + success pill badge -->
<button type="button" class="btn btn-dark rounded-pill">
  Comments
  <span class="badge d-flex text-bg-success rounded-pill ms-2 me-n1">9</span>
</button>

<!-- Outline secondary button + absolutely positioned pill badge -->
<button type="button" class="btn btn-outline-secondary position-relative">
  Inbox
  <span class="badge d-flex text-bg-info position-absolute top-0 start-100 translate-middle rounded-pill">50+</span>
</button>