Basic Badges in Bootstrap

Badges in Bootstrap are small, flexible components used to display additional information, such as counts or labels, on top of other elements. They are commonly used for notifications, status indicators, or to highlight data.

1. Basic Badge Structure

A basic badge is created using the <span> element with the class badge. You can also use various contextual classes to style the badge with different colors and meanings.

Example:

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

• <span class="badge">: Basic badge element.
• bg-primary: Contextual class to set the badge background color.

2. Contextual Badges

Bootstrap provides several contextual classes to style badges with different colors. These classes help convey meaning through color coding.

a. Primary Badge

Example:

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

• bg-primary: Applies the primary color.

b. Secondary Badge

Example:

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

• bg-secondary: Applies the secondary color.

c. Success Badge

Example:

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

• bg-success: Applies the success color (usually green).

d. Danger Badge

Example:

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

• bg-danger: Applies the danger color (usually red).

e. Warning Badge

Example:

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

• bg-warning: Applies the warning color (usually yellow).
• text-dark: Ensures the text is readable on the yellow background.

f. Info Badge

Example:

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

• bg-info: Applies the info color (usually light blue).

g. Light Badge

Example:

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

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

h. Dark Badge

Example:

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

• bg-dark: Applies the dark color (usually black).

3. Badge with Pill Shape

To create badges with a pill-like appearance (rounded edges), use the .rounded-pill class.

Example:

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

• rounded-pill: Applies rounded corners to the badge.

4. Badge with Buttons

Badges can be used with buttons to display counts or additional information.

Example:

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

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

5. Badge with Links

You can also use badges with links for navigation or 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, like avatars or icons, by using utility classes.

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">3</span>
</div>

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

Summary of Basic Badges in Bootstrap

• Basic Badge: <span class="badge"> with optional contextual classes.
• Contextual Classes: Use classes like bg-primary, bg-success, etc., for different colors.
• Pill Shape: Use .rounded-pill for rounded edges.
• With Buttons: Add badges inside buttons for counts or notifications.
• With Links: Badges can be used within links.
• Positioning: Use utility classes to position badges relative to other elements.