• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Badges

← Previous Next →

Badges are small, circular or rectangular indicators that often display counts, labels, or statuses. They are commonly used in navigation bars, buttons, lists, or notification areas to give users quick contextual information. Bootstrap 4 provides a flexible and easy-to-use badge component that can enhance the clarity and visual appeal of your web pages. This tutorial will cover everything from basic usage to customization, contextual styles, and practical examples.

What Are Badges?

A badge is a small overlay or label that typically displays numerical information, like unread messages, notifications, or item counts. Badges can also indicate status, like “New,” “Active,” or “Premium.” In Bootstrap 4, badges are created using the .badge class along with contextual classes like .badge-primary or .badge-success.

Badges can be added to buttons, links, headings, or even list items, making them extremely versatile for different scenarios.

Basic Badge Usage

The simplest badge is just a <span> with the .badge class. By default, it has a small, rounded appearance and subtle background color.

<h1>Notifications <span class="badge badge-primary">4</span></h1>

In this example, the badge “4” appears next to the heading, indicating the number of notifications. Badges are inline elements by default, so they naturally align with text.

Contextual Badge Styles

Bootstrap 4 offers a variety of contextual classes to represent different states or categories. These include:

  • .badge-primary – blue, general purpose

  • .badge-secondary – gray, subtle

  • .badge-success – green, positive actions

  • .badge-danger – red, warnings or errors

  • .badge-warning – yellow, caution

  • .badge-info – teal, informational

  • .badge-light – light gray, subtle emphasis

  • .badge-dark – dark gray or black, strong emphasis

<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>

Using color purposefully helps users quickly understand the meaning of each badge.

Badges on Buttons

A common use case is displaying badges on buttons to indicate counts, like items in a cart or unread messages. Bootstrap allows you to combine .btn and .badge easily.

<button type="button" class="btn btn-primary">
  Messages <span class="badge badge-light">5</span>
</button>

Here, the badge “5” is inside the button, giving immediate context to the user without taking extra space.

Pill Badges

By default, badges have slightly rounded corners. Bootstrap 4 also provides pill-shaped badges for a smoother, rounded appearance using .badge-pill.

<span class="badge badge-primary badge-pill">New</span>
<span class="badge badge-success badge-pill">Online</span>

Pill badges are especially useful in navigation bars, tags, or status indicators, creating a more modern look.

Badge in Lists

Badges can also be integrated with lists to provide counts or labels alongside items. You can use .list-group-item with a badge floated to the right using .badge and .float-right.

<ul class="list-group">
  <li class="list-group-item">
    Inbox <span class="badge badge-primary float-right">10</span>
  </li>
  <li class="list-group-item">
    Sent <span class="badge badge-success float-right">2</span>
  </li>
</ul>

This creates a clean interface for list items with clear numerical indicators.

Badge in Navigation

Badges are often used in navigation menus to indicate notifications or updates. For example, in a navbar:

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Dashboard</a>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Messages <span class="badge badge-danger">3</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Alerts <span class="badge badge-warning">7</span></a>
    </li>
  </ul>
</nav>

This placement makes badges functional and visually noticeable, improving user experience.

Badges with Links

Badges can be applied to links as well as static elements. Using .badge inside an <a> tag makes it clickable, which is useful for interactive interfaces.

<a href="#" class="badge badge-info">Read More</a>

Customization

While Bootstrap provides predefined colors, you can customize badges with your own CSS to match branding:

<span class="badge" style="background-color: #ff6600; color: white;">Premium</span>

You can also adjust size, padding, or border-radius to suit different layouts.

Best Practices

  1. Use badges sparingly; too many can overwhelm the user.

  2. Keep numbers and text concise.

  3. Match badge colors with their meaning for intuitive understanding.

  4. Place badges near the item or action they refer to.

  5. Ensure badges are accessible by providing text alternatives if needed.

Practical Examples

  • Email App: Show unread message counts next to folders.

  • E-commerce: Indicate items in the cart.

  • Notifications: Show new alerts in a navbar.

  • Tags: Use badges as category labels in blog posts.

  • Status Indicators: Online, Offline, or Premium status in user lists.

Summary of the Tutorial

Bootstrap 4 badges are versatile, small elements that provide contextual information efficiently. They can be placed on headings, buttons, lists, and navigation menus, and come in a variety of styles, sizes, and shapes. By using badges effectively, you can enhance clarity, improve usability, and make interfaces more interactive and user-friendly.

Practice Questions

  1. Create a heading with a badge displaying the number “4” next to it, using the Primary style.

  2. Create three badges with different contextual styles: Success, Danger, and Warning.

  3. Add a badge inside a button that displays the number of unread messages, e.g., “Messages 5,” using a light-colored badge inside a Primary button.

  4. Create pill-shaped badges for “New” and “Online” using .badge-pill.

  5. Create a list group with three items, each having a badge on the right showing a count: Inbox (10), Sent (2), Drafts (1).

  6. Add badges to navigation links to indicate notifications, e.g., “Messages 3” and “Alerts 7.”

  7. Create clickable badges using <a> tags for “Read More” and “Subscribe,” using Info and Success styles.

  8. Create a badge with a custom color (e.g., orange #ff6600) and white text labeled “Premium.”

  9. Create a heading with multiple badges indicating different statuses, e.g., “Active,” “Pending,” and “Completed.”

  10. Create a button group where each button has a badge showing counts or notifications, e.g., “Likes 12,” “Comments 5,” “Shares 3.”

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top