Badges
Badges are small labels for counts, statuses or highlights.
In this page:
Syntax
<span class="badge text-bg-primary">Label</span>
<span class="badge rounded-pill text-bg-danger">Label</span>Badges
Use .badge with .text-bg-{color} to create a small label; add .rounded-pill for pill shape. Badges scale with the parent heading or button font size, and can be positioned over other elements with position utilities.
Add visually hidden text for context.
Note:
Add a .visually-hidden span so screen readers know what the number means.
Example: Badges
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<h4>Inbox <span class="badge text-bg-secondary">4</span></h4>
<button class="btn btn-primary position-relative">Messages
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">99+<span class="visually-hidden">unread messages</span></span>
</button>
<span class="badge text-bg-success ms-3">New</span>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Colour-only status badges
- Using badges as buttons without markup
- Missing context text
Chapter Summary
- badge with text-bg-*
- rounded-pill for pills
- Scale with parent font size
- Add hidden context text
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: