Badges are small visual indicators used in web design to represent a status, notification, or a category related to an item. They are commonly used in conjunction with buttons, links, or other UI components to provide additional information at a glance. Badges often highlight new notifications, alerts, or counts that require user attention.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap badges 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>
<h4 class="text-primary" style="font-size: 2.5rem;">Badges Code Examples</h4>
<pre style="font-size: 1.2rem;"><code style="color: #000000; background-color: #f4f4f4; padding: 20px; display: block; width: 1150px;">
<!-- Basic Button Group -->
<h3>Basic Button Group</h3>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<hr>
<!-- Button Toolbar with Group -->
<h3>Button Toolbar</h3>
<div class="btn-toolbar" 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">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="btn-group me-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-secondary">8</button>
</div>
</div>
<hr>
<!-- Vertical Button Group -->
<h3>Vertical Button Group</h3>
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-info">Button 1</button>
<button type="button" class="btn btn-info">Button 2</button>
<button type="button" class="btn btn-info">Button 3</button>
</div>
<hr>
<!-- Dropdown Button Group -->
<h3>Button Group with Dropdown</h3>
<div class="btn-group" role="group" aria-label="Button group with dropdown">
<button type="button" class="btn btn-success">Action</button>
<button type="button" class="btn btn-success">Another action</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">Dropdown link 1</a></li>
<li><a class="dropdown-item" href="#">Dropdown link 2</a></li>
</ul>
</div>
</div>
<hr>
<!-- Checkbox Button Group -->
<h3>Checkbox Button Group</h3>
<div class="btn-group" role="group" aria-label="Checkbox button group">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>
<hr>
<!-- Radio Button Group -->
<h3>Radio Button Group</h3>
<div class="btn-group" role="group" aria-label="Radio button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-secondary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-secondary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-secondary" for="btnradio3">Radio 3</label>
</div>
<hr>
<!-- Button Group with Icons -->
<h3>Button Group with Icons</h3>
<div class="btn-group" role="group" aria-label="Button group with icons">
<button type="button" class="btn btn-danger">
<i class="bi bi-trash"></i> Delete
</button>
<button type="button" class="btn btn-warning">
<i class="bi bi-pencil"></i> Edit
</button>
<button type="button" class="btn btn-success">
<i class="bi bi-check2"></i> Save
</button>
</div>
<hr>
<!-- Justified Button Group -->
<h3>Justified Button Group</h3>
<div class="btn-group d-flex" role="group" aria-label="Justified button group">
<button type="button" class="btn btn-primary w-100">Left</button>
<button type="button" class="btn btn-primary w-100">Middle</button>
<button type="button" class="btn btn-primary w-100">Right</button>
</div>
<hr>
<!-- Button Group with Different Sizes -->
<h3>Button Group with Different Sizes</h3>
<div class="row">
<div class="col-md-6">
<h4>Large Button Group</h4>
<div class="btn-group" role="group" aria-label="Large button group">
<button type="button" class="btn btn-secondary btn-lg">Large</button>
<button type="button" class="btn btn-secondary btn-lg">Large</button>
<button type="button" class="btn btn-secondary btn-lg">Large</button>
</div>
</div>
</div>
<hr>
<div class="col-md-6">
<h4>Small Button Group</h4>
<div class="btn-group" role="group" aria-label="Small button group">
<button type="button" class="btn btn-secondary btn-sm">Small</button>
<button type="button" class="btn btn-secondary btn-sm">Small</button>
<button type="button" class="btn btn-secondary btn-sm">Small</button>
</div>
</div>
</code></pre>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>