In bootstrap badge is to add some additional information to
the element. For example, as we see some notification on
Facebook or on any other website. These are the badges.
Example of badges
<p>Unread Notifications<spanclass="badge badge-secondary">5</span></p><br/><p>Sent Messages<spanclass="badge badge-secondary">3</span></p><br/><p>Received Messages<spanclass="badge badge-secondary">2</span></p><br/><p>Sent Request<spanclass="badge badge-secondary">1</span></p><br/><p>Spam messages<spanclass="badge badge-secondary">3</span></p><br/>
Output of above code
Unread Notifications 5
Sent Messages 3
Received Messages 2
Sent Request 1
Spam messages 3
Contextual Badges
In bootstrap contextual classes are used to apply some styles to the badges. An example of contextual badges is given below.
<p>Unread Notifications<spanclass="badge badge-primary">5</span></p><br/><p>Sent Messages<spanclass="badge badge-warning">3</span></p><br/><p>Received Messages<spanclass="badge badge-success">2</span></p><br/><p>Sent Request<spanclass="badge badge-danger">1</span></p><br/><p>Spam messages<spanclass="badge badge-secondary">3</span></p><br/>
Output of above code
Unread Notifications 5
Sent Messages 3
Received Messages 2
Sent Request 1
Spam messages 3
Pill Badges
In this example badge-pill class is used
to make the corners of the badges rounded.
<p>Unread Notifications<spanclass="badge badge-primary badge-pill">5</span></p><br/><p>Sent Messages<spanclass="badge badge-warning badge-pill">3</span></p><br/><p>Received Messages<spanclass="badge badge-success badge-pill">2</span></p><br/><p>Sent Request<spanclass="badge badge-danger badge-pill">1</span></p><br/><p>Spam messages<spanclass="badge badge-secondary badge-pill">3</span></p><br/>
Output of above code
Unread Notifications 5
Sent Messages 3
Received Messages 2
Sent Request 1
Spam messages 3
Badge inside an Element
In this example buttons are used as content and then badges are used inside the buttons.
<buttontype="button"class="btn btn-primary">Unread Notifications<spanclass="badge badge-light">5</span></button><br/><buttontype="button"class="btn badge-warning">Sent Messages<spanclass="badge badge-light">3</span></button><br/><buttontype="button"class="btn badge-success">Received Messages<spanclass="badge badge-light">2</span></button><br/><buttontype="button"class="btn badge-danger">Sent Request<spanclass="badge badge-light">1</span></button><br/><buttontype="button"class="btn badge-secondary">Spam messages<spanclass="badge badge-light">0</span></button><br/>
Output of above code
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
