Badges

Badges can be used to display extra details alongside content.

To create rectangular badges, use the .badge class along with a contextual class like .bg-danger inside <span> tags. Keep in mind that badges automatically adjust to the size of their parent element.

Output :

Contextual Badges

Output :

Pill Badges

Apply the .rounded-pill class to give badges a more rounded, pill-like shape.

Output :

Badge inside an Element

Here’s how you can place a badge inside a button:

Output :