Welcome to The Coding College! In this tutorial, we’ll explore Bootstrap 4 Badges, a simple and effective way to display counts, labels, or notifications. Badges are versatile components that can be used to enhance your UI by adding visual indicators to buttons, navigation links, or other elements.
By the end of this guide, you’ll learn how to create, style, and customize badges using Bootstrap 4.
What Are Bootstrap 4 Badges?
A badge in Bootstrap 4 is a small, colorful UI element used to display additional information like counters, statuses, or labels. They are commonly added to buttons, links, or headings to draw attention to specific details.
Basic Badge
The simplest way to create a badge is to use the .badge class. You can pair it with contextual classes to assign colors to your badge.
Example:
<h1>Example Heading <span class="badge badge-secondary">New</span></h1>
<p>This is a paragraph with a <span class="badge badge-primary">badge</span>.</p> Badge Contextual Classes
Bootstrap 4 badges come with several predefined contextual classes for color coding. Here are the available options:
| Class Name | Color | Usage Example |
|---|---|---|
.badge-primary | Blue | Primary actions or indicators |
.badge-secondary | Gray | Secondary or neutral information |
.badge-success | Green | Indicates success or positive actions |
.badge-danger | Red | Indicates danger or errors |
.badge-warning | Yellow | Indicates warnings or caution |
.badge-info | Light Blue | General information |
.badge-light | White | For light themes |
.badge-dark | Black | For dark themes |
Example:
<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> Badges with Buttons
Badges are often used with buttons to display counts, such as notifications or cart items.
Example:
<button class="btn btn-primary">Notifications <span class="badge badge-light">4</span></button>
<button class="btn btn-danger">Messages <span class="badge badge-light">12</span></button> Pill Badges
To make badges rounded, use the .badge-pill class. Pill badges are great for a more modern look.
Example:
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span> Badges in Navigation
Badges can be added to navigation links to display unread counts or other indicators.
Example:
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Inbox <span class="badge badge-primary">3</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tasks <span class="badge badge-warning">7</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Notifications <span class="badge badge-danger">12</span></a>
</li>
</ul> Badges with Headings
Badges can be used alongside headings to emphasize status or labels.
Example:
<h1>Heading 1 <span class="badge badge-secondary">New</span></h1>
<h2>Heading 2 <span class="badge badge-primary">Featured</span></h2>
<h3>Heading 3 <span class="badge badge-danger">Hot</span></h3> Styling Badges with Custom CSS
You can customize badges using your own styles for unique designs.
Example:
<style>
.custom-badge {
background-color: #5cb85c;
color: #fff;
font-size: 14px;
padding: 5px 10px;
border-radius: 10px;
}
</style>
<span class="custom-badge">Custom Badge</span> Dynamic Badges with JavaScript
You can use JavaScript to update badge counts dynamically, such as in a shopping cart or notification system.
Example:
<button class="btn btn-info" id="cart-btn">Cart <span class="badge badge-light" id="cart-count">0</span></button>
<script>
let count = 0;
document.getElementById("cart-btn").addEventListener("click", function () {
count++;
document.getElementById("cart-count").innerText = count;
});
</script> Practical Example: Badges in Action
Here’s a complete example showing various ways to use badges:
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container my-5">
<h1 class="text-center text-primary">Bootstrap 4 Badges</h1>
<!-- Basic Badges -->
<h3>Basic Badges</h3>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<!-- Pill Badges -->
<h3 class="mt-4">Pill Badges</h3>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<!-- Badges in Buttons -->
<h3 class="mt-4">Badges in Buttons</h3>
<button class="btn btn-primary">Notifications <span class="badge badge-light">5</span></button>
<!-- Badges in Navigation -->
<h3 class="mt-4">Badges in Navigation</h3>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Inbox <span class="badge badge-primary">3</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tasks <span class="badge badge-warning">7</span></a>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html> Learn More with The Coding College
Bootstrap 4 Badges are a simple but powerful way to add visual indicators and information to your website. With their flexibility and ease of use, badges can be customized to suit any application.
At The Coding College, we’re committed to helping you master web development tools like Bootstrap 4 through clear, actionable tutorials