Badges can notify you that there are new or unread messages or notifications. Add the new class to the badge to give it the background.


  <div class="collection">
    <a href="#!" class="collection-item">Alan<span class="badge">1</span></a>
    <a href="#!" class="collection-item">Alan<span class="new badge">4</span></a>
    <a href="#!" class="collection-item">Alan</a>
    <a href="#!" class="collection-item">Alan<span class="badge">14</span></a>


You can customize captions in many ways.

Custom Caption

You can explicitly set the caption in a badge using the data-badge-caption attribute.

  <span class="new badge" data-badge-caption="custom caption">4</span>
  <span class="badge" data-badge-caption="custom caption">4</span>

You can use our color classes to set the background-color of the badge.

  <span class="new badge red">4</span>
  <span class="new badge blue">4</span>