Bootstrap Badges and Labels

17 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Add Stylish Badges

In this Bootstrap tutorial, you’ll learn how to use Bootstrap’s Badge classes to create small, colorful tags for notifications, counts, or highlights. We’ll pair badges with images to make your webpage pop.

What You’ll Learn

Creating basic badges
Using different badge colors
Adding badges to headings and buttons
Combining badges with images

Prerequisites

Basic knowledge of HTML
A text editor (e.g., VS Code, Notepad)
A web browser (e.g., Chrome, Firefox)

Step 1: Understand Bootstrap Badges

Bootstrap Badges use the badge class to create small, rounded tags for counts, statuses, or labels. They’re ideal for notifications (e.g., unread messages) or to highlight items, and can be styled with colors or shapes.

Assume Bootstrap CSS is included in your project (we’ll skip the <link> tag as requested).

Step 2: Create Basic Badges

Start with simple badges to show notifications. Use this code:

<div class="container">
    <h3>Basic Badges</h3>
    <span class="badge bg-primary">New</span>
    <span class="badge bg-success ms-2">Active</span>
</div>

Explanation:

container: Centers and constrains content.
badge: Applies base badge styling (small, rounded, padded).
bg-primary: Blue background for a primary badge.
bg-success: Green background for a success badge.
ms-2: Adds margin-start (left) for spacing.

These badges are small, colorful tags.

Step 3: Use Different Badge Colors

Bootstrap offers various colors for badges. Try this:

<div class="container">
    <h3>Colored Badges</h3>
    <span class="badge bg-warning text-dark ms-2">Pending</span>
    <span class="badge bg-danger ms-2">Error</span>
    <span class="badge bg-info ms-2">Info</span>
</div>

Explanation:

bg-warning text-dark: Yellow badge with dark text for readability.
bg-danger: Red badge for errors.
bg-info: Cyan badge for information.
ms-2: Spaces badges apart.

These colors highlight different statuses.

Step 4: Add Badges to Headings and Buttons

Badges look great inside headings or buttons. Use this:

<div class="container">
    <h3>Badges in Headings and Buttons</h3>
    <h2>Messages <span class="badge bg-secondary">4</span></h2>
    <button class="btn btn-primary">
        Notifications <span class="badge bg-light text-dark">3</span>
    </button>
</div>

Explanation:

badge bg-secondary in h2: Gray badge showing a message count.
badge bg-light text-dark in button: Light badge with dark text for contrast.
btn btn-primary: Blue button hosting the badge.

Badges enhance headings and buttons with counts or labels.

Step 5: Combine Badges with an Image

Pair a badge with a dummy image for a richer layout. Try this:

<div class="container">
    <div class="row">
        <div class="col-8">
            <h3>Profile <span class="badge bg-success">Verified</span></h3>
            <p>Your account is ready to use.</p>
            <button class="btn btn-primary">
                Edit <span class="badge bg-warning text-dark">1</span>
            </button>
        </div>
        <div class="col-4">
            <img src="https://placehold.co/200x150/28a745/ffffff" class="img-fluid rounded" alt="Green placeholder">
        </div>
    </div>
</div>

Explanation:

row and col-8, col-4: Splits content into text/badges (8 units) and image (4 units).
badge bg-success in h3: Green “Verified” badge.
badge bg-warning in button: Yellow badge for pending edits.
Uses a 200×150 green image for vibrancy.

The image makes the badge section more engaging.

Final Code

Here’s a combined example with varied badges and an image:

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Badge Examples</h3>
            <span class="badge bg-primary ms-2">New</span>
            <span class="badge bg-danger ms-2">Urgent</span>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h2>Inbox <span class="badge bg-info">5</span></h2>
            <button class="btn btn-success">
                Send <span class="badge bg-light text-dark">2</span>
            </button>
        </div>
    </div>
    <div class="row">
        <div class="col-7">
            <h3>Project <span class="badge bg-warning text-dark">In Progress</span></h3>
            <p>Track your tasks below.</p>
            <a href="#" class="btn btn-primary">
                View <span class="badge bg-secondary">3</span>
            </a>
        </div>
        <div class="col-5">
            <img src="https://placehold.co/250x150/ff6b6b/ffffff" class="img-fluid rounded" alt="Red placeholder">
        </div>
    </div>
</div>

Output

Your webpage should show:

A row with blue and red badges (New, Urgent).
A row with a heading (Inbox with a cyan badge) and a green button (Send with a light badge).
A two-column section with a heading (Project with a yellow badge), a blue button (View with a gray badge), and a red image (250×150).
All badges are responsive, adjusting for mobile, with colorful images for a vibrant look.

Next Steps

Check the Bootstrap Badges Docs for more options.
Try rounded-pill for pill-shaped badges.
Use badges in Bootstrap navbars for notifications.

Conclusion

You’ve mastered Bootstrap Badges! With classes like badge bg-primary and bg-success, plus striking images, you’ve created dynamic, colorful tags. Keep experimenting to enhance your webpages.