Badge component in Bootsrap

Introduction

Badges show small pieces of information like counts or labels. They help highlight important details quickly.

To show the number of unread messages next to an inbox icon.

To label new or updated items on a webpage.

To display status like 'Active' or 'Offline' in a user list.

To add counts on buttons, like number of items in a cart.

To highlight categories or tags in a blog post.

Syntax

Bootsrap

<span class="badge bg-primary">Text</span>

Use span with class badge and a background color class like bg-primary.

Badges can be placed inside buttons, links, or text to show extra info.

Examples

A simple badge with a gray background showing the word 'New'.

Bootsrap

<span class="badge bg-secondary">New</span>

A button with a badge showing the number 4, styled with light background and dark text.

Bootsrap

<button type="button" class="btn btn-primary">Inbox <span class="badge bg-light text-dark">4</span></button>

A badge styled as a link with green background indicating 'Active' status.

Bootsrap

<a href="#" class="badge bg-success">Active</a>

Sample Program

This page shows three examples of badges: a red badge next to 'Messages' showing 5, a yellow badge next to 'Notifications' showing 3, and a button labeled 'Cart' with a light badge showing 2.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Badge Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <main class="p-4">
    <h1>Messages <span class="badge bg-danger">5</span></h1>
    <p>Notifications <span class="badge bg-warning text-dark">3</span></p>
    <button type="button" class="btn btn-primary">
      Cart <span class="badge bg-light text-dark">2</span>
    </button>
  </main>
</body>
</html>

Important Notes

Badges should have good color contrast for readability.

Use bg- classes for background colors and add text-dark if the background is light.

Badges can be used inside buttons, links, or plain text for flexible UI.

Summary

Badges highlight small bits of info like counts or labels.

Use span with badge and color classes for styling.

They work well inside buttons, links, or text for clear visual cues.

Practice

1. What is the main purpose of a Bootstrap badge component?

easy

A. To style form input fields

B. To create large banners for page headers

C. To add navigation menus

D. To highlight small pieces of information like counts or labels

Solution

1. Step 1: Understand the badge role

   Badges are used to show small bits of info such as counts or labels next to text or buttons.

2. Step 2: Compare options

   Options A, B, and C describe other Bootstrap components or uses, not badges.

3. Final Answer:

   To highlight small pieces of information like counts or labels -> Option D

4. Quick Check:

   Badge = small info highlight [OK]

Hint: Badges show small info like numbers or labels [OK]

Common Mistakes:

• Confusing badges with navigation or headers
• Thinking badges style large elements
• Using badges for form inputs

2. Which of the following is the correct syntax to create a Bootstrap badge with a primary color?

easy

A. New

B. New

C. New

D. New

Solution

1. Step 1: Check Bootstrap badge syntax

   Bootstrap badges use a span with class badge plus a background color class like bg-primary.

2. Step 2: Validate each option

   New uses correct tags and classes. Options A, B, and D use incorrect tags or class names.

3. Final Answer:

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

4. Quick Check:

   Use span.badge.bg-primary [OK]

Hint: Use <span> with classes badge and bg-color [OK]

Common Mistakes:

• Using <div> instead of <span>
• Missing the 'badge' class
• Using wrong class names like badge-primary

3. What will be the visual result of this code?

<button type="button" class="btn btn-secondary">Messages <span class="badge bg-danger">5</span></button>

medium

A. A secondary button labeled 'Messages' with a red badge showing number 5

B. A red button labeled 'Messages' with a secondary badge showing number 5

C. A button labeled 'Messages' with no badge visible

D. A secondary button labeled 'Messages' with a blue badge showing number 5

Solution

1. Step 1: Analyze button and badge classes

   The button uses btn btn-secondary which styles it gray. The badge uses badge bg-danger which styles it red.

2. Step 2: Understand visual output

   The button text is 'Messages' and the badge with number 5 appears in red next to it.

3. Final Answer:

   A secondary button labeled 'Messages' with a red badge showing number 5 -> Option A

4. Quick Check:

   btn-secondary + badge bg-danger = gray button + red badge [OK]

Hint: bg-danger means red badge color [OK]

Common Mistakes:

• Confusing button and badge colors
• Expecting badge to be blue or missing
• Ignoring badge inside button

4. Identify the error in this badge code:

<span class="badge badge-primary">99</span>

medium

A. The span tag cannot be used for badges

B. The class 'badge-primary' is outdated; should use 'bg-primary' instead

C. The number 99 is too large for a badge

D. Missing closing tag for span

Solution

1. Step 1: Check Bootstrap badge color class

   In Bootstrap 5+, color classes for badges use bg-primary, not badge-primary.

2. Step 2: Validate other parts

   The span tag is correct, number size is fine, and the closing tag is present.

3. Final Answer:

   The class 'badge-primary' is outdated; should use 'bg-primary' instead -> Option B

4. Quick Check:

   Use bg-primary, not badge-primary [OK]

Hint: Use bg-primary for badge color, not badge-primary [OK]

Common Mistakes:

• Using old Bootstrap 4 class names
• Thinking span is invalid tag
• Assuming number size matters

5. You want to add a badge inside a navigation link that shows the number of unread notifications. Which is the best way to do this for accessibility and styling?

<a href="#" class="nav-link">Notifications <?></a>

What should replace <?>?

hard

A. <span class="badge bg-info" aria-label="unread notifications">3</span>

B. <div class="badge bg-info">3</div>

C. <span class="badge bg-info"><strong>3</strong></span>

D. <span class="badge bg-info" role="button">3</span>

Solution

1. Step 1: Choose correct tag and classes

   Badges should use span with badge and color class like bg-info.

2. Step 2: Add accessibility attribute

   Adding aria-label describes the badge meaning for screen readers, improving accessibility.

3. Final Answer:

   <span class="badge bg-info" aria-label="unread notifications">3</span> -> Option A

4. Quick Check:

   Use span.badge with aria-label for accessibility [OK]

Hint: Use aria-label on badge span for screen readers [OK]

Common Mistakes:

• Using div inside links (invalid HTML)
• Adding role=button unnecessarily
• Not adding aria-label for accessibility