How to add badge to list group in Bootstrap?

Adding badges to list groups in Bootstrap is a crucial aspect of creating engaging and informative user interfaces. Badges provide developers with the ability to display important information such as notification counts, unread messages, or upcoming events alongside list group items, allowing users to quickly and easily identify relevant content. While adding badges to list groups in Bootstrap may seem like a daunting task, the process can be easily accomplished with the proper guidance. In this article, we will explore the step-by-step approach to adding badges to list groups in Bootstrap, highlighting the underlying syntax and customization options available within the Bootstrap framework.


A symbol, known as a badge, is the numerical label appended to a link to exhibit the number of objects connected to it. An example of a badge is a notification digit that manifests the count of recently arrived notifications, visible upon logging in to a particular site. Badges are capable of resizing to suit the dimensions of the adjacent parent component through the use of relative font sizing. By situating the badges beside a list group, it is possible to highlight the salient features of the group and thereby, breathe life into the significant aspects of the series.

There are eight types of badges in Bootstrap. They are as follows −

  • bg-primary

  • bg-secondary

  • bg-success

  • bg-danger

  • bg-warning

  • bg-info

  • bg-light

  • bg-dark


To append a badge to a collection of lists in Bootstrap, we shall utilize the .badge classification in conjunction with the .list-group-item classification.


The following code creates a Bootstrap-based HTML webpage. In the head section, Bootstrap is imported using CDN through link and script tags. The body section contains a list-group <ul> tag consisting of list-group-items <li> tags. Each <li> tag includes a "span" element and a "badge" class that displays the badge. To showcase different types of badges, each <li> element is assigned a unique background color using "bg-primary", "bg-secondary", "bg-success", "bg-danger", "bg-warning", "bg-info", "bg-light", or "bg-dark" classes.

<!DOCTYPE html>
   <title>How to add badge to list group in Bootstrap?</title>
   <link rel="stylesheet" href="">
   <script src=""></script>
   <link href="" rel="stylesheet">
   <h4>How to add badge to list group in Bootstrap?</h4>
   <ul class="list-group">
      <li class="list-group-item">This is <span class="badge bg-primary">bg-primary</span></li>
      <li class="list-group-item">This is <span class="badge bg-secondary">bg-secondary</span></li>
      <li class="list-group-item">This is <span class="badge bg-success">bg-success</span></li>
      <li class="list-group-item">This is <span class="badge bg-danger">bg-danger</span></li>
      <li class="list-group-item">This is <span class="badge bg-warning">bg-warning</span></li>
      <li class="list-group-item">This is <span class="badge bg-info">bg-info</span></li>
      <li class="list-group-item">This is <span class="badge bg-light">bg-light</span></li>
      <li class="list-group-item">This is <span class="badge bg-dark">bg-dark</span></li>


In this article we had a brief interaction with badges in Bootstrap. We understood badge and saw its various types. We saw how with the help of classes list-group-item and badge we can add badge to a list group in Bootstrap. Finally, adding badges to list groups can significantly improve the user experience of your website by providing additional information in an attractive and easy-to-read format.

Updated on: 10-Apr-2023


Kickstart Your Career

Get certified by completing the course

Get Started