Badges

Badges appear in a “superscript” position, but you can create them using <span> elements: 1 2 345 678 9 10

<span class="badge">1</span>
<span class="badge bg-color-primary">2</span>
<span class="badge bg-color-secondary">345</span>
<span class="badge bg-color-warning">678</span>
<span class="badge bg-color-danger">9</span>
<span class="badge bg-color-success">10</span>

Place a badge within a button, and the badge will be positioned in the top right corner:

<button class="btn btn-icon bg-color-primary">
  <!-- icon -->
  <span class="badge bg-color-warning">37</span>
</button>

Codebase badges are sized im em units, so that they grow according to the size of the text they are on:

This is bigger1

<p style="font-size: 36px">This is bigger<span class="badge bg-color-warning">1</span></p>