Bootstrap 5 Badges Pill Badges

Last Updated : 19 Dec, 2022

Bootstrap 5 Badges Pill badges can be made by using the rounded-pill class on the badge component. This is used to give the badges a rounded corner shape.

Bootstrap 5 Badges Pill badge Class:

rounded-pill: This class is used with the badge class to make badges pill-shaped.

Syntax:

<span class="rounded-pill badge">
   ...
</span>

Example 1: In this example, we used the rounded-pill class to make the badges pill-shaped. We also used the background color utilities to change the background color of pill badges.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet"
          href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />

    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
    </script>
</head>

<body>
    <div class="container">
        <div class="mt-5">
            <h1 class="text-success">
                GeeksforGeeks
            </h1>
            <strong>Bootstrap 5 Badges Pill badges</strong>
        </div>

        <span class="rounded-pill badge 
                     bg-primary mt-4">
            Pill Badge - Primary
        </span>
        <br>
        <span class="rounded-pill badge 
                     bg-warning text-dark mt-3">
            Pill Badge - Warning
        </span>
        <br>
        <span class="rounded-pill badge 
                     bg-danger mt-3">
            Pill Badge - Danger
        </span>
        <br>
        <span class="rounded-pill badge 
                     bg-secondary mt-3">
            Pill Badge - Secondary
        </span>
        <br>
        <span class="rounded-pill badge 
                     bg-success mt-3">
            Pill Badge - Success
        </span>
        <br>
        <span class="rounded-pill badge 
                     bg-light text-dark mt-3">
            Pill Badge - Light
        </span>
        <br>
        <span class="rounded-pill badge 
                     bg-info text-dark mt-3">
            Pill Badge - Info
        </span>
    </div>
</body>

</html>

Output:

Example 2: In this example, we used pill badges with button components with different background colors.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet"
          href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />

    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
    </script>
</head>

<body>
    <div class="container">
        <div class="mt-5">
            <h1 class="text-success">GeeksforGeeks</h1>
            <strong>Bootstrap 5 Badges Pill badges</strong>
        </div>
        <br>
        <button type="button" class="btn btn-primary mt-4">
            Button 1
            <span class="rounded-pill badge bg-danger">
                Danger Colored Pill Badge
            </span>
        </button>
        <br>
        <button type="button" class="btn btn-primary mt-4">
            Button 2
            <span class="rounded-pill badge bg-warning">
                Warning Colored Pill Badge
            </span>
        </button>
        <br>
        <button type="button" class="btn btn-primary mt-4">
            Button 3
            <span class="rounded-pill badge bg-secondary">
                Secondary Colored Pill Badge
            </span>
        </button>
        <br>
        <button type="button" class="btn btn-primary mt-4">
            Button 4
            <span class="rounded-pill badge bg-success">
                Success Colored Pill Badge
            </span>
        </button>
    </div>
</body>

</html>