How to add badge to list group in Bootstrap ?

Last Updated : 20 Aug, 2021

In this article, we will learn how to make a badge list that gives the idea on a priority basis of the list. List Groups are used to display series of content. We can use the List Groups to display a series or list of content in an organized way & this can be helpful as we can modify it as per our needs.

Badges are the number label that is associated with the link to indicate the number of items associated with the link. For instance, the notification number can be seen when logged in to a particular website which tells the numbers of new notifications to see by clicking on it. Badges scale to match the size of the immediate parent element by using relative font sizing. Badges alongside the list group help us to grab viewers' attention to highlights the important points in a list group. It helps in adding vibrancy to important data in the given series.

Syntax:

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge bg-type">Badge Content</span>
    list-content
  </li>
</ul>

Types: Following are the 8 types of backgrounds available in Bootstrap 5.

bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-light
bg-dark

We will understand the purpose of using all these types of badges through the examples.

Example 1: This example illustrates a basic list group with different types of badges. These badges signify an emotion through their background colors such as success, danger, and neutrality.

HTML

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

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />

    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>

<body>
    <h1 style="color: green; text-align: center;">
        Geeksforgeeks
    </h1>
     
    <ul class="list-group">
        <li class="list-group-item">
            <span class="badge bg-primary" 
                style="color: white">
                New
            </span>
            Courses
        </li>
        <li class="list-group-item">
            <span class="badge bg-secondary" 
                style="color: white">
                Discontinued
            </span>
            Programs
        </li>
        <li class="list-group-item">
            <span class="badge bg-success" 
                style="color: white">
                Most popular
            </span>
            Classes
        </li>
        <li class="list-group-item">
            <span class="badge bg-danger" 
                style="color: white">
                Expiring soon
            </span>
            Hackathon
        </li>
        <li class="list-group-item">
            <span class="badge bg-warning" 
                style="color: white">
                Going fast
            </span>
            Job Portal
        </li>
        <li class="list-group-item">
            <span class="badge bg-info" 
                style="color: white">
                Exciting news
            </span>
            Golden membership
        </li>
        <li class="list-group-item">
            <span class="badge bg-light">
                Click bait
            </span>
            Login to US
        </li>
    </ul>
</body>

</html>

Output:

Example 2: In this example, we can further customize both the list group and badges individually to get our desired outcome. We will use a pill-shaped badge with a class rounded-pill for the notification badges in the list group.

HTML