Badges on a website are used to deliver some important information to the user such as a warning, notification count, promotion of a certain program, etc. Bootstrap 5 provides a certain class that lets you create badges on your website. Besides their creation, other classes are also available to style the badges. This blog guides you on how to create and style badges using Bootstrap 5.

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.

HTML

To create a badge the element is used within a

and

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.

Output

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/Badge-Styles-in-Bootstrap-5-Explained-1.png" data-lazy- height="137" src="data:image/svg xml,” width=”712″>

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.

HTML

Here we have created four badges and each of them has been assigned a different background color class.

Output

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/Badge-Styles-in-Bootstrap-5-Explained-2.png" data-lazy- height="65" src="data:image/svg xml,” width=”646″>

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.

HTML

The above code will generate four pill shaped badges each with a different background color.

Output

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/Badge-Styles-in-Bootstrap-5-Explained-3.png" data-lazy- height="72" src="data:image/svg xml,” width=”602″>

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.

HTML

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.

Output

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/Badge-Styles-in-Bootstrap-5-Explained-4.png" data-lazy- height="85" src="data:image/svg xml,” width=”811″>

The output above shows that there are a total of 8 missed calls.

Conclusion

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.