/    /  Bootstrap Badges

Bootstrap Badges

 

Badges are the same as labels; the primary difference is that the corners are more rounded. Badges are mainly used to highlight new, warning messages, notification counter, or unread items

 

Creating Badges:

 

The .badge class is used to add additional information to any content. Badges just add <span class = “badge”> to links, Bootstrap navs, navbars and etc.

 

Example:

 

<div class="container">
 <h4> Creating Badges</h4>
 <h4>Notification <span class="badge badge-secondary">3</span></h4>
 <h4>updates <span class="badge badge-secondary">New</span></h4>
 <h4> Notification1<span class="badge badge-secondary">4</span></h4>
 <h4>heading <span class="badge badge-secondary">5</span></h4>
 <h4>Notification2 <span class="badge badge-secondary">6</span></h4>
 <h4>Notification3 <span class="badge badge-secondary">7</span></h4>
</div>

 

OUTPUT:

 

Bootstrap4 Badges

 

Contextual Classes for Badges:

 

Use any of the contextual classes (.badge-*) is used to change the color of badges. It can be used as part of links or buttons to provide a counter.

 

Example:

 

<div class="container">
 <h4>Contextual Classes for Badges</h4>
  <span class="badge badge-primary">Primary</span>
  <span class="badge badge-secondary">Secondary</span>
  <span class="badge badge-success">Success</span>
  <span class="badge badge-danger">Danger</span>
  <span class="badge badge-warning">Warning</span>
  <span class="badge badge-info">Info</span>
  <span class="badge badge-dark">Dark</span>
  <span class="badge badge-light">Light</span>
</div>

 

OUTPUT:

Bootstrap4 Badges

 

Pill Badges:

 

Use the .badge-pill class  is used to make the badges more round.

 

Example:

 

<div class="container">
 <h2>Pill Badges</h2>
 <span class="badge badge-pill badge-primary">1</span>
 <span class="badge badge-pill badge-secondary">2</span>
 <span class="badge badge-pill badge-success">3</span>
 <span class="badge badge-pill badge-danger">4</span>
 <span class="badge badge-pill badge-warning">5</span>
 <span class="badge badge-pill badge-info">6</span>
 <span class="badge badge-pill badge-light">7</span>
 <span class="badge badge-pill badge-dark">8</span>
</div>

 

OUTPUT:

 

Bootstrap4 Badges

 

Showing Counter with Badges:

 

An example of using Badges can be created inside an element.

 

Example:

 

<div class="container">
 <h4>Badge inside a button</h4>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a href="#" class="nav-link">Badge</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">Badge1</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link active">Notification <span class="badge badge-light">24</span></a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">update <span class="badge badge-primary">5</span></a>
    </li>
  </ul>
</div>

 

OUTPUT: