Badges
Bootstrap 5 Badges component
Responsive Badges built with the latest Bootstrap 5. Badges add extra information like count or label to any content. Use counters, icons, or labels. Many examples and easy tutorial.
Documentation and examples for badges, our small count and labeling component.
Basic example
Use .badge
class to provide your visitors with highlighted, new or unread items by adding it to links, text navs, and more.
Example heading New
Sizes
Badges scale to match the size of the immediate parent element by using relative font sizing
and em
units. As of v5, badges no longer have focus or hover styles for links.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Colors
Use our badge color classes to quickly change the appearance of a badge.
Conveying meaning to assistive technologies:
Using color to add meaning only provides a visual indication, which will not be conveyed to
users of assistive technologies – such as screen readers. Ensure that information denoted by
the color is either obvious from the content itself (e.g. the visible text), or is included
through alternative means, such as additional text hidden with the
.visually-hidden
class.
Pills
Use the .rounded-pill
utility class to make badges more rounded with a larger
border-radius
.
Positioned
Use utilities to modify a .badge
and position it in the corner of a link or button.
You can also replace the .badge
class with a few more utilities without a count for a more generic indicator.
With avatar

Icon notifications
You can use our icons and
.badge-notification
class to create a facebook-like notification.
Icon inside
You can place an icon inside the badge. Read icons docs to see all the available icons.
It composes nicely inside of the section with features.
Badges - API
CSS variables
As part of MDB’s evolving CSS variables approach, badge now use local CSS variables for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
Badges CSS variables are in different classes which belong to this component. To make it easier to use them, you can find below all of the used CSS variables.