Prev Next

BS5 Badges

Bootstrap 5 Badges are small components used to display counts, labels, or tags with additional contextual colors. They are highly versatile and easy to customize.

Key Topics

Basic Badges

Badges are created using the .badge class with contextual classes like .bg-primary, .bg-danger, and others.

<span class="badge bg-primary">Primary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-warning text-dark">Warning</span>

Explanation: The .badge class styles the badge, while contextual classes define the color. Use .text-dark for better contrast on light backgrounds.

Pill Badges

Add the .rounded-pill class to badges to create rounded, pill-shaped badges.

<span class="badge bg-primary rounded-pill">Primary Pill</span>
<span class="badge bg-danger rounded-pill">Danger Pill</span>

Explanation: The .rounded-pill class ensures that badges are fully rounded for a softer look.

Wrap badges in a link tag to make them interactive. This is useful for navigation or actions.

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

Explanation: Use .text-decoration-none to remove underline styling from link-based badges.

Complete Badge Example

Here is a complete HTML page showcasing various badges, including pill badges and badges with links.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Badges Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2>Bootstrap Badges</h2>

        <h3>Basic Badges</h3>
        <span class="badge bg-primary">Primary</span>
        <span class="badge bg-success">Success</span>
        <span class="badge bg-warning text-dark">Warning</span>

        <h3>Pill Badges</h3>
        <span class="badge bg-danger rounded-pill">Danger Pill</span>
        <span class="badge bg-secondary rounded-pill">Secondary Pill</span>

        <h3>Badge with Links</h3>
        <a href="#" class="badge bg-info text-decoration-none">Clickable Badge</a>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This page demonstrates how to use basic badges, pill badges, and interactive badges in a responsive layout.

Key Takeaways

  • Bootstrap badges are created with the .badge class and contextual colors.
  • Use .rounded-pill for pill-shaped badges.
  • Wrap badges in links for interactivity.
Prev Next