How to change the size of a bootstrap pill badge? - GeeksforGeeks

27 Nov, 2020
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="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"></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="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"></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="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">      <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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bootstrap-Misc
HTML-Misc
Picked
Technical Scripter 2020
Bootstrap
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to change the background color of the active nav-item?
How to Use Bootstrap with React?
Difference between Bootstrap 4 and Bootstrap 5
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?