How to add badge to list group in Bootstrap ?
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.
<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.
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.
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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.