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>

Powered  by Codersarts