Bootstrap - Badges Demo

What is a Badge?

Hello there, future web developers! Today, we're going to dive into the exciting world of Bootstrap badges. As your friendly neighborhood computer teacher, I'm here to guide you through this journey, even if you've never written a single line of code before. So, grab your virtual backpacks, and let's embark on this adventure together!

A badge in Bootstrap is like a digital sticker you can add to your web page. It's a small, often circular or pill-shaped element used to highlight or display additional information. Think of it as the web equivalent of those little notification bubbles you see on your phone apps – they're eye-catching and informative!

Real-world analogy

Imagine you're wearing a scout uniform. The badges on your sleeve represent your achievements, right? Bootstrap badges work similarly in the digital world. They can show numbers (like unread messages), status (new, sale, etc.), or simply add visual interest to your web page.

Getting Started with Bootstrap Badges

Before we jump into the code, let's make sure we have Bootstrap set up. Don't worry; it's easier than setting up a tent on a camping trip!

Setting up Bootstrap

To use Bootstrap, we need to include its CSS and JavaScript files in our HTML. Here's how you do it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Badges Demo</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- Your content goes here -->

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

This is like setting the stage for our badge performance. We've linked to Bootstrap's CSS and JavaScript files, which give us access to all the Bootstrap goodies, including badges.

Basic Badge Usage

Now that we're all set up, let's create our first badge!

Simple Badge Example

<h1>Welcome to my blog <span class="badge bg-secondary">New</span></h1>

In this example, we've added a badge right next to our heading. The span element with the classes badge and bg-secondary creates a simple gray badge with the text "New".

Explanation

<span>: This is an inline container used to mark up a part of a text.
class="badge": This Bootstrap class turns our span into a badge.
bg-secondary: This adds a gray background color to our badge.

Badge Colors

Bootstrap offers a rainbow of colors for your badges. Let's explore them!

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

Each of these badges has a different color, perfect for conveying different meanings or just making your page more colorful!

Color Meaning Table

Color	Typical Usage
Primary	Main actions or information
Secondary	Less important information
Success	Positive actions or messages
Danger	Warnings or error messages
Warning	Cautionary information
Info	Neutral informational messages
Light	Subtle backgrounds or less emphasis
Dark	High contrast or important information

Pill Badges

Want to make your badges look a bit more rounded? Enter pill badges!

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

By adding the rounded-pill class, we transform our regular badge into a pill-shaped one. It's like giving your badge a makeover!

Badges in Buttons

Badges can also be used within buttons to create some pretty cool effects. Let's try it out:

<button type="button" class="btn btn-primary">
  Messages <span class="badge bg-secondary">4</span>
</button>

This creates a button that says "Messages" with a small badge showing the number 4. It's perfect for showing things like unread message counts!

Positioned Badges

Sometimes, you want your badge to be positioned relative to another element. Bootstrap makes this easy with positioned badges:

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

This creates a button with a badge positioned at the top-right corner, slightly overlapping the button. It's like the cherry on top of your button sundae!

Breaking it down

position-relative: Makes the button a positioning context for the badge.
position-absolute: Positions the badge absolutely within the button.
top-0 start-100: Positions the badge at the top-right corner.
translate-middle: Shifts the badge for better visual alignment.
visually-hidden: Provides text for screen readers without displaying it visually.

Conclusion

And there you have it, folks! We've journeyed through the land of Bootstrap badges, from simple colored badges to pill-shaped ones, and even positioned badges on buttons. Remember, badges are like the seasoning in your web design recipe – use them wisely to add just the right amount of flavor to your pages!

Practice makes perfect, so don't be afraid to experiment with different combinations. Who knows? You might just create the next big trend in web design with your creative use of badges!

Happy coding, and may your badges always be bright and your tooltips always informative!

Credits: Image by storyset

Previous Tutorial:

Bootstrap - Modals Demo

Next Tutorial:

Bootstrap - Breadcrumbs Demo