Bootstrap docs

# Badges

Small count and labeling component.

#### Solid

Primary Secondary Secondary alt Success Danger Warning Info
Light
Dark

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

#### Outline

Primary Secondary Success Danger Warning Info
Light
Dark

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

#### Subtle

Primary Secondary Success Danger Warning Info
Light
Dark

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

#### Badge with icon

Home Favorite

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

#### Shapes

Rounded Pill badge Square

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

#### Inside heading

# Example heading New

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

#### Inside button

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

#### Inside list group

Messages 14 Orders 2 Favourites 6

    <!-- Show count indicators or additional information with badges inside list group -->
    <div class="list-group">
      <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" href="#">
        Messages
        <span class="badge bg-success">14</span>
      </a>
      <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" href="#">
        Orders
        <span class="badge bg-warning">2</span>
      </a>
      <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" href="#">
        Favourites
        <span class="badge bg-danger">6</span>
      </a>
    </div>

Top