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