Bootstrap 4 badges are small UI components used to highlight important information, such as notifications, labels, and counters. They are typically used with buttons, headings, and navigation items.
What This Tutorial Covers:
- Basic Bootstrap 4 badge usage
- Different badge styles
- Badges with buttons
- Pill-shaped badges
- Badges in headings
- Badges in navigation
- Customizing badges with CSS
1. Basic Bootstrap 4 Badges
To create a badge, use the .badge class. By default, badges are inline elements.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 Badges</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<h3>Notifications <span class="badge badge-primary">4</span></h3>
</div>
</body>
</html>
Explanation:
- .badge is required for styling the badge.
- .badge-primary applies the primary theme.
2. Different Badge Styles
Bootstrap 4 provides different badge colors to indicate various types of messages.
Example:
<div class="container mt-4">
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
</div>
Available Badge Classes:
| Class | Description |
|---|---|
| .badge-primary | Blue badge for primary actions |
| .badge-secondary | Gray badge for secondary actions |
| .badge-success | Green badge for success messages |
| .badge-danger | Red badge for errors and warnings |
| .badge-warning | Yellow badge for caution messages |
| .badge-info | Light blue badge for information |
| .badge-light | Light gray badge |
| .badge-dark | Dark gray badge |
3. Badges with Buttons
Badges are commonly used with buttons to display notifications.
Example:
<div class="container mt-4">
<button class="btn btn-primary">
Messages <span class="badge badge-light">3</span>
</button>
</div>
Explanation:
- The badge is placed inside the button to indicate the number of messages.
- .badge-light ensures the badge stands out on a dark button.
4. Pill-Shaped Badges
Use .badge-pill to create a rounded badge.
Example:
<div class="container mt-4">
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
</div>
Explanation:
- .badge-pill gives badges rounded edges.
5. Badges in Headings
Badges can be used inside headings to emphasize numbers or statuses.
Example:
<div class="container mt-4">
<h1>Heading 1 <span class="badge badge-success">New</span></h1>
<h2>Heading 2 <span class="badge badge-danger">Alert</span></h2>
<h3>Heading 3 <span class="badge badge-warning">Updated</span></h3>
</div>
Explanation:
- Badges inside headings are useful for displaying statuses like “New”, “Hot”, or “Updated”.
6. Badges in Navigation
You can use badges inside navigation items to display notifications.
Example:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#">Inbox <span class="badge badge-danger">5</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messages <span class="badge badge-primary">2</span></a>
</li>
</ul>
Explanation:
- Badges highlight unread messages or notifications in navigation menus.
7. Customizing Badges with CSS
You can customize Bootstrap badges with your own CSS styles.
Example:
<style>
.custom-badge {
background-color: #ff5733;
color: white;
font-size: 14px;
padding: 5px 10px;
border-radius: 8px;
}
</style>
<div class="container mt-4">
<span class="badge custom-badge">Custom Badge</span>
</div>
Explanation:
- Custom styles change the background color, padding, font size, and border-radius.
8. Badges with Dismissible Alerts
Badges can be placed inside alerts to provide additional information.
Example:
<div class="container mt-4">
<div class="alert alert-warning alert-dismissible fade show" role="alert">
Warning Alert <span class="badge badge-danger">High</span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Explanation:
- The badge inside an alert emphasizes priority levels (e.g., High, Medium, Low).
- The dismiss button allows users to close the alert.
Conclusion
Bootstrap 4 badges are a way to highlight information in buttons, headings, navigation, and alerts.
