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>