Bootstrap Badges

A badge is a small visual label that provides additional information about an element.

Example:

<span class="badge text-bg-primary">
New
</span>

Badges are useful when you want to show a short piece of information without taking much space.

The .badge class provides the basic styling for a Bootstrap badge.

<span class="badge text-bg-success">
Success
</span>

The .badge class is normally combined with a contextual background utility.

Use text-bg-primary to create a primary-colored badge.

<span class="badge text-bg-primary">
Primary
</span>

Primary badges can be used for general information or highlighted categories.

The text-bg-success class creates a success-style badge.

<span class="badge text-bg-success">
Completed
</span>

It can be used for statuses such as Completed, Active, Approved, or Paid.

The text-bg-danger class creates a danger-style badge.

<span class="badge text-bg-danger">
Failed
</span>

Danger badges can be used for errors, failed operations, or important warning statuses.

The text-bg-warning class creates a warning badge.

<span class="badge text-bg-warning">
Pending
</span>

Warning badges are useful for statuses that require attention.

The text-bg-info class creates an informational badge.

<span class="badge text-bg-info">
Information
</span>

It can be used to identify additional information or categories.

The text-bg-light class creates a light-colored badge.

<span class="badge text-bg-light border">
Light
</span>

A border can help distinguish a light badge from a light background.

The text-bg-dark class creates a dark badge.

<span class="badge text-bg-dark">
Dark
</span>

Bootstrap provides several contextual background combinations for badges.

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-dark">Dark</span>

Badges can be placed inside headings to display additional information.

<h3>
Students
<span class="badge text-bg-primary">
25
</span>
</h3>

Students 25

This is useful for showing counts next to headings.

Badges can be placed inside buttons to show counts or notifications.

<button class="btn btn-primary">

    Messages

    <span class="badge text-bg-light">
    5
    </span>

</button>

Badges are commonly used to show notification counts.

<button class="btn btn-dark">
Notifications
<span class="badge text-bg-danger">
8
</span>
</button>

This pattern is commonly used in dashboards and navigation bars.

A badge can be used inside a Bootstrap card to show status.

<div class="card">

    <div class="card-body">

        <h5>Course Details</h5>

        <span class="badge text-bg-success">
        Active
        </span>

    </div>

</div>

Badges are very useful for displaying status values inside tables.

<td>
<span class="badge text-bg-success">
Active
</span>
</td>

Badges can be placed inside list group items.

<ul class="list-group">

<li class="list-group-item d-flex justify-content-between">

    Students

    <span class="badge text-bg-primary">
    50
    </span>

</li>

</ul>

• Students 50
• Courses 8

The .rounded-pill utility can be combined with a badge to create a pill-shaped appearance.

<span class="badge text-bg-primary rounded-pill">
New
</span>

Pill badges are useful for short labels and status indicators.

Pill-shaped badges work especially well for notification counts.

<span class="badge text-bg-danger rounded-pill">
99+
</span>

Badges can also be placed inside links.

<a href="#" class="text-decoration-none">

Products

<span class="badge text-bg-primary">
12
</span>

</a>

Bootstrap spacing utilities can be used to add space around badges.

<span class="badge text-bg-primary me-2">
HTML
</span>

<span class="badge text-bg-success">
CSS
</span>

The me-2 class adds margin on the end side of the first badge.

Badges can identify categories in an education website.

<span class="badge text-bg-primary">
HTML
</span>

<span class="badge text-bg-success">
CSS
</span>

<span class="badge text-bg-warning">
JavaScript
</span>

<span class="badge text-bg-danger">
Python
</span>

Badges can display student status in an education management system.

<span class="badge text-bg-success">
Active
</span>

<span class="badge text-bg-warning">
Pending
</span>

<span class="badge text-bg-danger">
Inactive
</span>

Badges are useful for showing payment status.

This makes status information easy to scan.

A badge can highlight newly added content.

<h4>
Bootstrap Tutorial

<span class="badge text-bg-success">
New
</span>

</h4>

Bootstrap Tutorial New

This pattern is useful for courses, lessons, products, and blog posts.

Badges can be placed inside different heading elements.

Heading 2 5

Heading 4 10

Heading 6 2

The badge automatically fits naturally with its surrounding text.

Badges should provide useful information rather than relying only on color.

• Use meaningful text inside badges.
• Do not communicate important information using color alone.
• Use readable text and sufficient contrast.
• Keep badge labels short and clear.
• Use badges for supporting information.

Avoid using badges unnecessarily.

• Do not use too many badges in one small area.
• Do not use badges for long sentences.
• Do not use color without meaningful text.
• Do not make important actions look like simple labels.
• Do not make badges unnecessarily large.

Badges work best when they provide short, useful information.

Common Bootstrap badge combinations include:

<span class="badge text-bg-primary">Primary</span>

<span class="badge text-bg-success">Success</span>

<span class="badge text-bg-danger">Danger</span>

<span class="badge text-bg-warning">Warning</span>

<span class="badge text-bg-info">Info</span>

<span class="badge text-bg-dark">Dark</span>

<span class="badge text-bg-primary rounded-pill">
Pill
</span>

Here is an example of badges used in a simple dashboard.

<div class="card">

    <div class="card-body">

        <h5>Student Dashboard</h5>

        <p>
        Account Status:
        <span class="badge text-bg-success">
        Active
        </span>
        </p>

        <p>
        Assignments:
        <span class="badge text-bg-primary">
        12
        </span>
        </p>

        <p>
        Pending Fees:
        <span class="badge text-bg-danger">
        Due
        </span>
        </p>

    </div>

</div>

The following example combines headings, badges, counts, status labels, and pill badges.

<div class="container mt-4">

    <h3>
    Student Management

    <span class="badge text-bg-primary rounded-pill">
    25
    </span>

    </h3>

    <p>
    Active Students:
    <span class="badge text-bg-success">
    20
    </span>
    </p>

    <p>
    Pending Students:
    <span class="badge text-bg-warning">
    3
    </span>
    </p>

    <p>
    Inactive Students:
    <span class="badge text-bg-danger">
    2
    </span>
    </p>

</div>