Bootstrap Badges
Badges are small, lightweight labels you use to highlight extra information such as counts, statuses, or tags. In Bootstrap 5 a badge is created with the .badge class and styled with the same background and text utilities you already know, so they blend naturally into buttons, headings, and lists.
What is a badge?
A badge is a small piece of text that draws attention to a number or a short label. Think of the little red circle showing unread messages on an app icon, or a "New" tag next to a product name. In Bootstrap you build one by adding the .badge class to an inline element such as a <span>. On its own .badge only sets the padding, font size, and rounded corners, so you almost always pair it with a background color utility.
A basic badge
<!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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Notifications <span class="badge bg-secondary">4</span></h1>
<h2>Messages <span class="badge bg-primary">12</span></h2>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Because a badge sits inside the element it belongs to, its size scales with the surrounding text. A badge inside an <h1> looks larger than the same badge inside a paragraph. This makes badges feel like a natural part of your heading rather than a separate widget.
Contextual background colors
Use the background color utilities to give a badge meaning. Colors like bg-success, bg-danger, and bg-warning let readers understand a status at a glance. Note that the light and warning backgrounds are pale, so add the text-dark class to keep the text readable.
Colored 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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<span class="badge bg-primary">Primary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Common badge background classes
Pill badges and badges in buttons
Add the rounded-pill class to make a badge fully rounded, which is popular for count indicators. Badges also work well inside buttons to show a related number, such as the count of items in a cart.
Pill badge and a badge inside a button
<!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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<span class="badge rounded-pill bg-danger">99+</span>
<button type="button" class="btn btn-primary">
Inbox <span class="badge bg-light text-dark">7</span>
</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Exercise: Bootstrap Badges
What are Bootstrap badges primarily designed to display?
