Badges

Bootstrap documentation: Badge Most of the details have been covered here Material Design guidelines: Bottom navigation - Badges

Text with a badge

A badge can be appended to a text with 2 conditions:

Text is wrapped in a <span class="position-relative"> element. This text container must be of position: relative for badge absolute positioning.
Badge is inserted within this text element.

Text with a badge 4

<p class="typography-body-1">
  <span class="position-relative">Text with a badge
    <span class="badge badge-primary">4</span>
  </span>
</p>

Button with a badge

Just add your badge element beside button’s text.

Badge can be left aligned with .badge-before.

<button type="button" class="btn btn-primary">
  Notifications
  <span class="badge badge-danger">8</span>
</button>

<button type="button" class="btn btn-primary ml-5">
  Action
  <span class="badge badge-secondary badge-before">2</span>
</button>

Icon with a badge

Add .position-relative class to your <i> or <span> element containing your icon (material icons, Fontawesome …) and insert badge beside icon’s name.

.badge-before class is still available.

home 15 home 999

<span class="material-icons position-relative">
  home
  <span class="badge badge-danger">15</span>
</span>

<span class="material-icons position-relative ml-5">
  home
  <span class="badge badge-danger badge-before">999</span>
</span>