Core Code
Core Code Modern Dev Handbook

List with Badges

Display counts inside list items using badges.

Preview

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

<div class="container py-5">

<ul class="list-group">

<li class="list-group-item d-flex justify-content-between align-items-center">
Messages
<span class="badge bg-primary rounded-pill">12</span>
</li>

<li class="list-group-item d-flex justify-content-between align-items-center">
Tasks
<span class="badge bg-success rounded-pill">4</span>
</li>

</ul>

</div>

</body>
</html>

More BS5 List Groups Examples (7)

example Basic List Group open example example Active List Item open example example Disabled List Item open example example Linked List Group open example example Flush List Group open example example Horizontal List Group open example example Sidebar Menu Example open example