How to change the size of a bootstrap pill badge?

Given an HTML document having pill badges (In case if you don’t know what a pill badge then refer to this ) and the task is to increase the size of the badge. There can be three approaches to do that. The approaches are discussed below:-

Approach 1: Using Inline styling: You can 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.

Example:

Output:

Approach 2: Embedding 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.

Example:

Output:

Approach 3: By overriding 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.

Example:

Output: