Badge Variants in Bootstrap

Badges in Bootstrap are flexible components used for displaying labels, notifications, or counts in a small, visually distinct format. While the core badge functionality remains consistent, you can customize the appearance using various variants to fit different design needs.

1. Contextual Badge Variants

Bootstrap provides a range of contextual classes to apply different background colors to badges, which helps in conveying various types of information or statuses.

a. Primary Badge

Example:

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

• bg-primary: Applies the primary color, typically blue.

b. Secondary Badge

Example:

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

• bg-secondary: Applies the secondary color, which is usually a shade of gray.

c. Success Badge

Example:

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

• bg-success: Applies the success color, often green, indicating a positive outcome.

d. Danger Badge

Example:

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

• bg-danger: Applies the danger color, usually red, to indicate a critical issue.

e. Warning Badge

Example:

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

• bg-warning: Applies the warning color, generally yellow.
• text-dark: Ensures text is readable on the yellow background.

f. Info Badge

Example:

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

• bg-info: Applies the info color, typically light blue, for informational content.

g. Light Badge

Example:

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

• bg-light: Applies a light background color.
• text-dark: Ensures text contrast on the light background.

h. Dark Badge

Example:

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

• bg-dark: Applies a dark background color, often black.

2. Badge with Pill Shape

Badges can be styled with rounded edges to create a pill-like appearance, which can be achieved using the .rounded-pill class.

Example:

<span class="badge rounded-pill bg-success">Pill Badge</span>

• rounded-pill: Gives the badge rounded corners for a pill-like shape.

3. Badge with Custom Colors

If you need a badge with custom colors, you can create your own classes and apply them.

Example:

CSS:

.badge-custom {
  background-color: #ff5722; /* Custom color */
  color: #ffffff; /* Text color */
}

HTML:

<span class="badge badge-custom">Custom Badge</span>

• .badge-custom: Custom class to define your own background and text colors.

4. Badge on Buttons

Badges can be used with buttons to indicate counts or notifications.

Example:

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

• <span class="badge">: Badge inside a button.

5. Badge on Links

You can also use badges with links for interactive elements.

Example:

<a href="#" class="badge bg-info text-decoration-none">Link Badge</a>

• text-decoration-none: Removes underline from the link.

6. Badge Positioning

Badges can be positioned relative to other elements using utility classes for precise placement.

Example:

<div class="position-relative">
  <img src="avatar.png" class="rounded-circle" alt="Avatar">
  <span class="badge bg-danger position-absolute top-0 start-100 translate-middle">New</span>
</div>

• position-relative: Sets the container's position to relative.
• position-absolute: Positions the badge absolutely within the container.
• top-0 start-100 translate-middle: Adjusts the badge's position relative to its container.

Summary of Badge Variants in Bootstrap

• Contextual Colors: Use classes like bg-primary, bg-success, bg-danger, etc., to apply different background colors.
• Pill Shape: Apply .rounded-pill for a rounded badge appearance.
• Custom Colors: Define custom styles with your own classes.
• With Buttons and Links: Add badges to buttons and links for counts or notifications.
• Positioning: Use utility classes to position badges relative to other elements.