How to change the size of a bootstrap pill badge?

Last Updated : 25 Jun, 2024

To resize a Bootstrap pill badge, adjust its font-size for text size and padding for overall dimensions using custom CSS. This ensures the badge maintains visual balance and readability while fitting your design requirements effectively.

Example 1: In this example, use Inline styling 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.

HTML 
<!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">&nbsp;
    </span>
    
    <h3>
        Size of Pill badge after 
        using Approach 1st 
    </h3>
    
    <span class="badge badge-pill 
        badge-primary" 
        style="font-size:2rem;">&nbsp;
    </span>
</body>

</html>

Output:

Example 2: In this example, Embed 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.

html 
<!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">&nbsp;</span>
        
        <h3>
            Different Sizes of Pill badge 
            after using Approach 2nd 
        </h3>
        
        <h4>h1 tag</h4>
        <h1><span class="badge badge-pill 
            badge-primary">&nbsp;</span>
        </h1>
        
        <h4>h2 tag</h4>
        <h2><span class="badge badge-pill 
            badge-primary">&nbsp;</span>
        </h2>
        
        <h4>h3 tag</h4>
        <h3><span class="badge badge-pill 
            badge-primary">&nbsp;</span>
        </h3>
        
        <h4>h4 tag</h4>
        <h4><span class="badge badge-pill 
            badge-primary">&nbsp;</span>
        </h4>
        
        <h4>h5 tag</h4>
        <h5><span class="badge badge-pill 
            badge-primary">&nbsp;</span>
        </h5>
        
        <h4>h6 tag</h4>
        <h6><span class="badge badge-pill 
            badge-primary">&nbsp;</span>
        </h6>
    </div>
</body>

</html>

Output:

Example 3: In this example, overrid 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.

html 
<!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">&nbsp;
        </span>
        
        <h3>
            Size of Pill badge after 
            using Approach 3rd 
        </h3>
        
        <span class="badge badge-pill 
            badge-primary increase-size">
            &nbsp;</span>
    </div>
</body>

</html>

Output:

Comment

Explore