Bootstrap 5 Badges Pill Badges

Bootstrap 5 Badges Pill badges can be made by using the rounded-pill class on the badge component. This is used to give the badges a rounded corner shape.

Bootstrap 5 Badges Pill badge Class:

• rounded-pill: This class is used with the badge class to make badges pill-shaped.

Syntax:

<span class="rounded-pill badge">
 ...
</span>

Example 1: In this example, we used the rounded-pillclass to make the badges pill-shaped. We also used the background color utilities to change the background color of pill badges.

Output:

👁 Image

Example 2: In this example, we used pill badges with button components with different background colors.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/components/badge/#pill-badges