How to create a badge
For the purpose of creating a badge use the .badge class along with a background color class which are .bg-primary, .bg-success, .bg-secondary, .bg-info, .bg-warning, .bg-danger, .bg-light, .bg-dark.
To create a badge the <span> element is used within a <h1> and <p> element. The element has been assigned the .badge class along with a background color class, .bg-warning to give the badge a yellow background. Note that a badge by default has a rectangular shape and scales up and down to match the size of the parent element, if there is any.
The badges in the above output are used to grab a users’ attention.
How to give a background color to badges
Badges can be provided a background color using any of the background color classes. These classes play an important role in conveying the meaning of a badge.
Here we have created four badges and each of them has been assigned a different background color class.
Each badge conveys a different meaning.
How to create rounded badges
As already mentioned, badges by default have a rectangular shape, however, if you desire to give them a rounded shape then use the .rounded-pill class.
The above code will generate four pill shaped badges each with a different background color.
The badges were given a rounded shape successfully.
How to create counter badges
Counter badges can be used to display notification count of a certain element. For the purpose of making such badges you have to nest the element within that particular element.
Here we have created a “missed calls” button having a certain style and then we have nested a element which also has a certain style and shows the number of missed calls, thereby, displaying the notification count for the missed calls.
The output above shows that there are a total of 8 missed calls.
For the purpose of creating and styling badges using Bootstrap 5 use the .badge class along with one of the background color classes which are .bg-primary, .bg-success, .bg-secondary, .bg-info, .bg-warning, .bg-danger, .bg-light, .bg-dark to give them a background color. Moreover, a badge by default has a rectangular shape, however, these can be given a rounded shape using the .rounded-pill class. Furthermore, you make a notification counter badge by nesting the badge inside an element.