Creating Bootstrap Badges
It is used to indicate some valuable information on the web pages such as important heading, warning messages, notification counter, etc.
Syntax:
<h1>Bootstrap heading <span class="badge badge-secondary">New</span></h1>
Classes which used in this
Syntax:
<span class="badge badge-primary">Primary</span>
We add another to modify it like: Secondary, Success, Danger, Warning, Info, Dark, Light.
Pill Badges- more rounded corner
Using the .badge-pill modifier class create pill Badges.
Syntax:
<span class="badge badge-pill badge-primary">Primary</span>
We add another to modify it like: Secondary, Success, Danger, Warning, Info, Dark, Light.
Counter with Badges
Use to count number of received or unread messages, number of notifications etc. They're most commonly found in email clients, application dashboards, social networking websites, etc
Syntax:
<ul class="nav nav-pills">
<li class="nav-item"> <a href="#" class="nav-link active">Messages <span class="badge badge-light">24</span></a> </li>
<li class="nav-item"> <a href="#" class="nav-link">Notification <span class="badge badge-primary">5</span></a> </li>
</ul>