How to change the size of a bootstrap pill badge?
Last Updated :
30 Mar, 2023
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:
html
<!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:
html
<!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:
html
<!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 3rd
</ h3 >
< span class="badge badge-pill
badge-primary increase-size">
</ span >
</ div >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...