0
0
Bootsrapmarkup~5 mins

Badge component in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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>
OutputSuccess
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.