Related Articles

Related Articles

How to change the size of a bootstrap pill badge?
  • Difficulty Level : Easy
  • Last Updated : 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :