How to add badge to list group in Bootstrap ? - GeeksforGeeks

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
<!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                 rounded-pill text-light">                New and improved            </span>        </li>        <li class="list-group-item disabled">            <span class="badge bg-danger text-dark">                Discontinued            </span>        </li>        <li class="list-group-item active">            <span class="badge bg-success text-light">                Most popular                <span class="badge bg-secondary">                    10                </span>            </span>        </li>    </ul></body>  </html>
Output:
Reference:
Bootstrap-5 Badges
List group in bootstrap with examples
Badges and Breadcrumbs
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bootstrap-4
Bootstrap-Questions
Picked
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to keep gap between columns using Bootstrap?
Tailwind CSS vs Bootstrap
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property