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

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

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

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

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

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

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

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

// Primary solid badge
span.badge.bg-primary.fs-sm Primary

// Secondary solid badge
span.badge.bg-secondary.fs-sm Secondary

// Success solid badge
span.badge.bg-success.fs-sm Success

// Danger solid badge
span.badge.bg-danger.fs-sm Danger

// Warning solid badge
span.badge.bg-warning.fs-sm Warning

// Info solid badge
span.badge.bg-info.fs-sm Info

// Light solid badge
span.badge.bg-light.fs-sm Light

// Dark solid badge
span.badge.bg-dark.fs-sm Dark

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

<!-- Secondary outline badge -->
<span class="badge border text-nav fs-sm">Secondary</span>

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

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

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

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

<!-- Light outline badge -->
<span class="badge border border-white fs-sm">Light</span>

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

// Primary outline badge
span.badge.border.border-primary.text-primary.fs-sm Primary

// Secondary outline badge
span.badge.border.text-nav.fs-sm Secondary

// Success outline badge
span.badge.border.border-success.text-success.fs-sm Success

// Danger outline badge
span.badge.border.border-danger.text-danger.fs-sm Danger

// Warning outline badge
span.badge.border.border-warning.text-warning.fs-sm Warning

// Info outline badge
span.badge.border.border-info.text-info.fs-sm Info

// Light outline badge
span.badge.border.border-white.fs-sm Light

// Dark outline badge
span.badge.border.border-dark.text-dark.fs-sm Dark

<!-- Primary translucent badge -->
<span class="badge bg-faded-primary text-primary fs-sm">Primary</span>

<!-- Success translucent badge -->
<span class="badge bg-faded-success text-success fs-sm">Success</span>

<!-- Danger translucent badge -->
<span class="badge bg-faded-danger text-danger fs-sm">Danger</span>

<!-- Warning translucent badge -->
<span class="badge bg-faded-warning text-warning fs-sm">Warning</span>

<!-- Info translucent badge -->
<span class="badge bg-faded-info text-info fs-sm">Info</span>

<!-- Light translucent badge -->
<span class="badge bg-faded-light fs-sm">Light</span>

<!-- Dark translucent badge -->
<span class="badge bg-faded-dark text-dark fs-sm">Dark</span>

// Primary translucent badge
span.badge.bg-faded-primary.text-primary.fs-sm Primary

// Success translucent badge
span.badge.bg-faded-success.text-success.fs-sm Success

// Danger translucent badge
span.badge.bg-faded-danger.text-danger.fs-sm Danger

// Warning translucent badge
span.badge.bg-faded-warning.text-warning.fs-sm Warning

// Info translucent badge
span.badge.bg-faded-info.text-info.fs-sm Info

// Light translucent badge
span.badge.bg-faded-light.fs-sm Light

// Dark translucent badge
span.badge.bg-faded-dark.text-dark.fs-sm Dark

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

h1
  | Example heading 
  span.badge.bg-secondary New
h2
  | Example heading 
  span.badge.bg-secondary New
h3
  | Example heading 
  span.badge.bg-secondary New
h4
  | Example heading 
  span.badge.bg-secondary New
h5
  | Example heading 
  span.badge.bg-secondary New
h6
  | Example heading 
  span.badge.bg-secondary New

<!-- Button + badge -->
<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-light ms-2">4</span>
</button>

<!-- Pill button + badge -->
<button type="button" class="btn btn-dark rounded-pill">
  Profile <span class="badge bg-danger ms-2">9</span>
</button>

<!-- Outline button + badge -->
<button type="button" class="btn btn-outline-secondary">
  Messages <span class="badge bg-info ms-2">18</span>
</button>

// Button + badge
button(type="button").btn.btn-primary
  | Notifications 
  span.badge.bg-light.ms-2 4

// Pill button + badge
button(type="button").btn.btn-dark.rounded-pill
  | Profile 
  span.badge.bg-danger.ms-2 9

// Outline button + badge
button(type="button").btn.btn-outline-secondary
  | Messages 
  span.badge.bg-info.ms-2 18

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

// Badges inside list group
.list-group
  a(href="#").list-group-item.list-group-item-action.d-flex.justify-content-between.align-items-center
    | Messages
    span.badge.bg-success 14
  a(href="#").list-group-item.list-group-item-action.d-flex.justify-content-between.align-items-center
    | Orders
    span.badge.bg-warning 2
  a(href="#").list-group-item.list-group-item-action.d-flex.justify-content-between.align-items-center
    | Favourites
    span.badge.bg-danger 6