How to change the size of a bootstrap pill badge?

To resize a Bootstrap pill badge, adjust its font-size for text size and padding for overall dimensions using custom CSS. This ensures the badge maintains visual balance and readability while fitting your design requirements effectively.

Example 1: In this example, use Inline styling simply add a style attribute to the span tag which has badge-pill as a class and change the font size, according to your wish.

Output:

👁 Image

Example 2: In this example, Embed the badge inside the heading tag we can also wrap the span tag of the badge in a different heading tags to achieve the desired result.

Output:

👁 Image

Example 3: In this example, overrid the class using Internal/External CSS we can also add our own custom class name for the badge and in the CSS file, we can update the font-size property to achieve the desired result.

Output:

👁 Image