Badges are small visual indicators that provide context or additional information to users. They can display counts, status updates, or important notifications without taking up much space. Badges are often used alongside buttons, links, or navigation items to convey important information at a glance.
Here are a few common scenarios where badges can be effectively utilized:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap GroupButtons Example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<!-- Basic Button Group with Badges -->
<h3>Basic Button Group with Badges</h3>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary btn-lg">Left <span class="badge bg-light text-dark">4</span></button>
<button type="button" class="btn btn-primary btn-lg">Middle <span class="badge bg-light text-dark">10</span></button>
<button type="button" class="btn btn-primary btn-lg">Right <span class="badge bg-light text-dark">1</span></button>
<button type="button" class="btn btn-primary btn-lg">Extra <span class="badge bg-light text-dark">9</span></button>
</div>
<!-- Button Toolbar with Group -->
<h3>Button Toolbar with Badges</h3>
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary btn-lg">1 <span class="badge bg-light text-dark">3</span></button>
<button type="button" class="btn btn-secondary btn-lg">2 <span class="badge bg-light text-dark">5</span></button>
<button type="button" class="btn btn-secondary btn-lg">3 <span class="badge bg-light text-dark">12</span></button>
<button type="button" class="btn btn-secondary btn-lg">4 <span class="badge bg-light text-dark">9</span></button>
</div>
<div class="btn-group me-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary btn-lg">5 <span class="badge bg-light text-dark">7</span></button>
<button type="button" class="btn btn-secondary btn-lg">6 <span class="badge bg-light text-dark">2</span></button>
<button type="button" class="btn btn-secondary btn-lg">7 <span class="badge bg-light text-dark">6</span></button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-secondary btn-lg">8 <span class="badge bg-light text-dark">4</span></button>
<button type="button" class="btn btn-secondary btn-lg">9 <span class="badge bg-light text-dark">3</span></button>
<button type="button" class="btn btn-secondary btn-lg">10 <span class="badge bg-light text-dark">8</span></button>
</div>
</div>
<!-- Vertical Button Group with Badges -->
<h3>Vertical Button Group with Badges</h3>
<div class="btn-group-vertical mb-4" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-info btn-lg">Button 1 <span class="badge bg-light text-dark">3</span></button>
<button type="button" class="btn btn-info btn-lg">Button 2 <span class="badge bg-light text-dark">8</span></button>
<button type="button" class="btn btn-info btn-lg">Button 3 <span class="badge bg-light text-dark">5</span></button>
<button type="button" class="btn btn-info btn-lg">Button 4 <span class="badge bg-light text-dark">1</span></button>
<button type="button" class="btn btn-info btn-lg">Button 5 <span class="badge bg-light text-dark">6</span></button>
<button type="button" class="btn btn-info btn-lg">Button 6 <span class="badge bg-light text-dark">10</span></button>
<button type="button" class="btn btn-info btn-lg">Button 7 <span class="badge bg-light text-dark">12</span></button>
<button type="button" class="btn btn-info btn-lg">Button 8 <span class="badge bg-light text-dark">4</span></button>
</div>
<!-- Dropdown Button Group with Badges -->
<h3>Dropdown Button Group with Badges</h3>
<div class="btn-group" role="group" aria-label="Button group with dropdown">
<button type="button" class="btn btn-warning btn-lg">Action 1 <span class="badge bg-light text-dark">5</span></button>
<button type="button" class="btn btn-warning btn-lg">Action 2 <span class="badge bg-light text-dark">4</span></button>
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle btn-lg" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown <span class="badge bg-light text-dark">2</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action 3 <span class="badge bg-light text-dark">1</span></a></li>
<li><a class="dropdown-item" href="#">Action 4 <span class="badge bg-light text-dark">5</span></a></li>
<li><a class="dropdown-item" href="#">Action 5 <span class="badge bg-light text-dark">3</span></a></li>
<li><a class="dropdown-item" href="#">Action 6 <span class="badge bg-light text-dark">9</span></a></li>
<li><a class="dropdown-item" href="#">Action 7 <span class="badge bg-light text-dark">3</span></a></li>
</ul>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>