Skip to content
Related Articles
Open in App
Not now

Related Articles

Bootstrap 5 Badges

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 25 Jan, 2023
Improve Article
Save Article

Bootstrap 5 is the latest major release by Bootstrap where they have revamped the UI and made various changes. Badges are used for creating labels. Badges scale to match the size of the immediate parent element by using relative font sizing.

Bootstrap-5 Badges

  • Examples
    • Badge Headings: Badge headings can be used to label the latest information about the headings.
    • Badges Buttons: The badge class is used to show the small count or notification dot.
    • Badges Positioned: It is used to position the badge in the corner of the button or to make the link look more appealing. 
  • Background colors Badges Background colors provide different utility classes for backgrounds that help to enhance the appearance of a badge.
  • Pill Badges: Pill badges can be made by using the rounded-pill class on the badge component.
  • SASS: It is used to change the default value of the badge’s font size, font color, padding, border radius, and font weight.

Syntax:  

<div class="badge bg-type"> Contents... <div>

Example 1: This example demonstrates the working of the first four types of Badges in Bootstrap 5. 

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
        crossorigin="anonymous">
</head>
<body>
    <div style="text-align: center;width: 600px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
    </div>
    <div id="canvas" style="width: 600px;
            height: 200px;margin:20px;">
        <h4>
          Hello World
            <span class="badge bg-primary">
                GeeksforGeeks
            </span>
        </h4>
        <h4>
            Hello World
            <span class="badge bg-secondary">
                GeeksforGeeks
            </span>
        </h4>
        <h4>
            Hello World
            <span class="badge bg-success">
                GeeksforGeeks
            </span>
        </h4>
        <h4>
            Hello World
            <span class="badge bg-danger">
                GeeksforGeeks
            </span>
        </h4>
    </div>
</body>
</html>


Output:

Example 2: This example demonstrates the working of last four types of Badges in Bootstrap 5. 

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
        crossorigin="anonymous">
</head>
<body>
    <div style="text-align: center;width: 600px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
    </div>
    <div id="canvas" style="width: 600px;
            height: 200px;margin:20px;">
        <h4>
          Hello World
            <span class="badge bg-warning">
                GeeksforGeeks
            </span>
        </h4>
        <h4>
            Hello World
            <span class="badge bg-info">
                GeeksforGeeks
            </span>
        </h4>
        <h4>
            Hello World
            <span class="badge bg-light text-dark">
                GeeksforGeeks
            </span>
        </h4>
        <h4>
            Hello World
            <span class="badge bg-dark">
                GeeksforGeeks
            </span>
        </h4>
    </div>
</body>
</html>


Output:

Example 3: This example shows the working of notification badges in Bootstrap 5. 

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
        crossorigin="anonymous">
</head>
<body style="text-align:center;">
    <div class="container mt-3">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <button type="button" class="btn btn-primary">
            Notifications
            <span class="badge bg-secondary">
                10
            </span>
        </button>
    </div>
</body>
</html>


Output:

Example 4: This example shows the working of Pill Badges in Bootstrap 5. 

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
        crossorigin="anonymous">
</head>
<body style="text-align:center;">
    <div class="container mt-3">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <span class="badge rounded-pill
            bg-primary">
          Primary
        </span>
        <span class="badge rounded-pill 
            bg-secondary">
          Secondary
        </span>
        <span class="badge rounded-pill 
            bg-success">
          Success
        </span>
        <span class="badge rounded-pill 
            bg-danger">
          Danger
        </span>
        <span class="badge rounded-pill 
            bg-warning text-dark">
          Warning
        </span>
        <span class="badge rounded-pill 
            bg-info">
          Info
        </span>
        <span class="badge rounded-pill 
            bg-light text-dark">
          Light
        </span>
        <span class="badge rounded-pill 
            bg-dark">
          Dark
        </span>
    </div>
</body>
</html>


Output:

Supported Browser:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!