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:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= </head> <body> <h3> Size of Pill badge Simple Bootstrap Code </h3> <span class="badge badge-pill badge-primary"> </span> <h3> Size of Pill badge after using Approach 1st </h3> <span class="badge badge-pill badge-primary" style="font-size:2rem;"> </span> </body> </html> |
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:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= </head> <body> <div class="example"> <h3> Size of Pill badge Simple Bootstrap Code </h3> <span class="badge badge-pill badge-primary"> </span> <h3> Different Sizes of Pill badge after using Approach 2nd </h3> <h4>h1 tag</h4> <h1><span class="badge badge-pill badge-primary"> </span> </h1> <h4>h2 tag</h4> <h2><span class="badge badge-pill badge-primary"> </span> </h2> <h4>h3 tag</h4> <h3><span class="badge badge-pill badge-primary"> </span> </h3> <h4>h4 tag</h4> <h4><span class="badge badge-pill badge-primary"> </span> </h4> <h4>h5 tag</h4> <h5><span class="badge badge-pill badge-primary"> </span> </h5> <h4>h6 tag</h4> <h6><span class="badge badge-pill badge-primary"> </span> </h6> </div> </body> </html> |
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:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= <style> .increase-size { font-size: 2rem; } </style> </head> <body> <div class="example"> <h3> Size of Pill badge Simple Bootstrap Code </h3> <span class="badge badge-pill badge-primary"> </span> <h3> Size of Pill badge after using Approach 3nd </h3> <span class="badge badge-pill badge-primary increase-size"> </span> </div> </body> </html> |
Output:
Please Login to comment...