Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
Badge
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
Approach
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.
Example
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>
<html>
<head>
<title>How to add badge to list group in Bootstrap?</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
</head>
<body>
<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>
</ul>
</body>
</html>
Conclusion
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.
184 Views
