Bootstrap Badges and Labels

In web design, small visual cues can make a big difference in user experience. Bootstrap Badges and Labels are two lightweight components designed to add context and emphasis to your UI elements. Whether you want to highlight notifications, categorize data, or draw attention to specific content, these components make it easy.

In this tutorial from TheCodingCollege.com, we’ll show you how to use, customize, and maximize the potential of Bootstrap Badges and Labels to enhance your designs.

What Are Bootstrap Badges and Labels?

• Badges: Used to display dynamic counters or small bits of additional information. For example, showing unread messages or notifications.
• Labels: Used to highlight text with a styled, colored background for emphasis or categorization.

Both are lightweight, easy to implement, and fully responsive, making them an essential tool for modern web applications.

Bootstrap Badges

Badges are often used within buttons, navigation items, or standalone elements to display counts or status indicators.

Basic Syntax

The badge class is used to implement badges in Bootstrap.

<span class="badge">Badge Text</span>

Example – Badge in a Button

<button type="button" class="btn btn-primary">
    Notifications <span class="badge">4</span>
</button>

Output:

A button labeled “Notifications” with a badge displaying the count of 4 next to it.

Example – Badge in a List Group

<ul class="list-group">
    <li class="list-group-item">
        Inbox <span class="badge">10</span>
    </li>
    <li class="list-group-item">
        Sent <span class="badge">5</span>
    </li>
    <li class="list-group-item">
        Drafts <span class="badge">2</span>
    </li>
</ul>

Output:

A list group where badges represent the number of items in each category.

Bootstrap Labels

Labels provide contextual meaning or categorization for specific text. They are useful for status updates, product tags, or any situation requiring emphasis.

Basic Syntax

The label class is used to add labels. Combine it with contextual classes like label-default, label-primary, label-success, and more for different styles.

<span class="label label-success">Success</span>

Example – Labels for Status Updates

<p>
    Order Status: <span class="label label-warning">Pending</span>
</p>
<p>
    Payment Status: <span class="label label-success">Completed</span>
</p>
<p>
    Account Status: <span class="label label-danger">Deactivated</span>
</p>

Output:

Labels styled with different colors to indicate status updates.

Bootstrap Badges vs. Labels

Combining Badges and Labels

You can use both badges and labels together for advanced UI designs.

Example – Notification Center

<h4>Notifications</h4>
<ul class="list-group">
    <li class="list-group-item">
        New Messages <span class="badge">3</span>
    </li>
    <li class="list-group-item">
        New Comments <span class="badge">5</span> <span class="label label-info">New</span>
    </li>
    <li class="list-group-item">
        System Alerts <span class="badge">1</span> <span class="label label-warning">Important</span>
    </li>
</ul>

Output:

A notification center styled with badges for counts and labels for status updates.

Customizing Badges and Labels

Both badges and labels can be customized using CSS to fit your branding and design.

Example – Custom Colors and Sizes

<style>
    .custom-badge {
        background-color: #28a745;
        font-size: 14px;
        padding: 5px 10px;
    }
    .custom-label {
        background-color: #dc3545;
        font-size: 12px;
        padding: 3px 7px;
        border-radius: 3px;
    }
</style>

<span class="badge custom-badge">Custom Badge</span>
<span class="label custom-label">Custom Label</span>

Using Badges in Navigation Bars

Badges work seamlessly with navigation items to indicate unread messages or notifications.

Example – Navigation Bar with Badges

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Messages <span class="badge">5</span></a></li>
            <li><a href="#">Alerts <span class="badge">2</span></a></li>
        </ul>
    </div>
</nav>

Output:

A navigation bar where badges display the number of messages and alerts.

Responsive Design with Badges and Labels

Both badges and labels are fully responsive, meaning they will adjust size and positioning across different screen sizes. Use media queries to fine-tune their appearance for specific devices.

Example – Adjust Badge Size for Mobile

<style>
    @media (max-width: 768px) {
        .badge {
            font-size: 10px;
            padding: 3px 5px;
        }
    }
</style>

Best Practices for Using Bootstrap Badges and Labels

1. Keep It Minimal: Use badges and labels sparingly to avoid clutter.
2. Combine with Icons: Pairing badges with icons (e.g., bell for notifications) improves clarity.
3. Ensure Readability: Make sure text inside badges and labels is legible, even on small screens.
4. Test for Accessibility: Add aria-label attributes for screen readers to ensure badges and labels are accessible.
5. Use Contextual Colors: Stick to Bootstrap’s predefined colors for better user recognition.

Advantages of Bootstrap Badges and Labels

• Lightweight: Minimal CSS for efficient design.
• Pre-Styled: Saves time with built-in styles.
• Responsive: Perfect for any device.
• Customizable: Easily tweak colors, sizes, and shapes.

Limitations

• Bootstrap 3-Specific: Badges and labels are no longer supported in the same way in Bootstrap 4+ (replaced by utilities like badge-pill or other classes).
• Limited Shapes: By default, badges and labels are circular or rectangular, requiring customization for unique designs.

Conclusion

Bootstrap Badges and Labels are powerful tools for enhancing your web application’s UI by providing contextual highlights and status indicators. Whether you’re building a notification system, categorizing content, or emphasizing statuses, these components are versatile and easy to use.