Bootstrap - Badges demo

What is a badge?

A badge is a small inline element used to highlight or label certain information. It is typically displayed as a small circle or rectangle containing a number or text. They visually highlight important information or provide quick status updates within your web application.

The Bootstrap classes that is used to add a badge in <html> element is .badge.

Other classes that can be used to cutomize the badges are:

  • color utility classes such as .bg-*, .text-bg-*

  • positioning classes such as .position-absolute

  • pill badges through .rounded-pill utility class

Some of the examples for badges are as follows:

Example Description Download link
Badges basic This example shows the structure of badges and various other classes that can be applied to them in Bootstrap Download
Kickstart Your Career

Get certified by completing the course

Get Started