Alerts and Badges

Bootstrap Feedback Components: Alerts & Badges

The Story of Helpful Signs 🪧

Imagine you’re walking through a magical theme park. Everywhere you go, there are helpful signs that tell you important things:

• 🟢 Green signs say “Great job! You found the treasure!”
• 🔴 Red signs warn “Careful! Dragons ahead!”
• 🟡 Yellow signs remind “Don’t forget your map!”
• 🔵 Blue signs share “Fun fact: This ride is 50 years old!”

Bootstrap Alerts work exactly like these signs on your website. They grab attention and share important messages!

And those little name tags and count bubbles you see? Those are Badges - tiny labels that add extra info to things!

Part 1: Alerts - Your Website’s Helpful Signs

What is an Alert?

An Alert is a colored box that displays a message. It’s like a sticky note that says “Hey, look at me!”

<div class="alert alert-primary">
  Hello! I'm a basic alert!
</div>

What this creates: A blue box with your message inside.

The Color Options (Alert Types)

Bootstrap gives you 8 colors for different moods:

<div class="alert alert-success">
  Your file was saved!
</div>

<div class="alert alert-danger">
  Password is incorrect!
</div>

<div class="alert alert-warning">
  Your trial ends in 3 days!
</div>

Part 2: Alert Links - Clickable Words Inside Alerts

Sometimes your alert needs a clickable link. Use the special class alert-link to make links match the alert’s color:

<div class="alert alert-info">
  Read our
  <a href="#" class="alert-link">
    privacy policy
  </a>
  for details.
</div>

Why alert-link? Regular links look out of place. The alert-link class makes them blend in beautifully with matching colors.

Example with danger alert:

<div class="alert alert-danger">
  Login failed.
  <a href="#" class="alert-link">
    Reset password?
  </a>
</div>

The link will be a darker shade of red that matches perfectly!

Part 3: Alert Icons - Adding Pictures to Your Signs

Words are great, but pictures make messages clearer! You can add icons to alerts:

<div class="alert alert-success d-flex">
  <svg class="me-2" width="20" height="20">
    <!-- checkmark icon -->
  </svg>
  <div>Payment successful!</div>
</div>

The pattern:

1. Add d-flex to the alert (makes things sit side by side)
2. Put your icon first
3. Add me-2 to the icon (creates space between icon and text)
4. Wrap your text in a <div>

Common icon pairings:

Part 4: Alert Dismissing - The X Button

Some alerts should disappear when the user is done reading. Add a close button!

Step 1: Add special classes to your alert:

<div class="alert alert-warning
            alert-dismissible fade show">

  Sale ends tonight!

  <button type="button"
          class="btn-close"
          data-bs-dismiss="alert">
  </button>

</div>

What each part does:

Important: You need Bootstrap’s JavaScript for this to work!

Part 5: Badges - Tiny Labels of Power

Now let’s talk about Badges - those little colored labels you see everywhere!

Think of badges like:

• The “NEW!” sticker on a toy box
• The notification count on your phone apps
• The “SALE” tag on clothes

Basic Badge

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

Result: A small blue pill with “New” written inside.

Badges with Headings

Badges look great next to titles:

<h3>
  Messages
  <span class="badge bg-danger">4</span>
</h3>

Result: “Messages” with a red “4” badge showing unread count.

Part 6: Badge Colors

Just like alerts, badges come in 8 colors:

<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>

Note: For light backgrounds (bg-warning, bg-info, bg-light), add text-dark so the text is readable!

Part 7: Badge Pills - Rounder Badges

Want your badges to look like little pills or capsules? Add rounded-pill:

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

Comparison:

<!-- Regular -->
<span class="badge bg-success">Sale</span>

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

Part 8: Badge Positioned - Notification Bubbles

The coolest badge trick! Put a badge on top of something like a button:

<button type="button"
        class="btn btn-primary position-relative">

  Inbox

  <span class="badge rounded-pill bg-danger
               position-absolute top-0 start-100
               translate-middle">
    99+
  </span>

</button>

How it works:

graph TD
    A["Parent needs position-relative"] --> B["Badge gets position-absolute"]
    B --> C["top-0 = stick to top"]
    C --> D["start-100 = push to right edge"]
    D --> E["translate-middle = center on corner"]

The positioning classes:

Screen Reader Accessibility

Add hidden text for screen readers:

<span class="badge bg-danger position-absolute
             top-0 start-100 translate-middle">
  99+
  <span class="visually-hidden">
    unread messages
  </span>
</span>

Quick Reference Flow

graph TD
    A["Need to show a message?"] --> B{What type?}
    B -->|Full message box| C["Use ALERT"]
    B -->|Small label/count| D["Use BADGE"]

    C --> E{Needs close button?}
    E -->|Yes| F["Add alert-dismissible + btn-close"]
    E -->|No| G["Basic alert is fine"]

    D --> H{Where to place?}
    H -->|Inline with text| I["Just add badge class"]
    H -->|Corner of button| J["Use position utilities"]

Real-World Examples

Example 1: Notification Center

<div class="alert alert-info alert-dismissible
            fade show d-flex">
  <span class="me-2">📬</span>
  <div class="flex-grow-1">
    You have
    <span class="badge bg-primary">3</span>
    new messages!
  </div>
  <button class="btn-close"
          data-bs-dismiss="alert">
  </button>
</div>

Example 2: Product Card

<div class="card">
  <span class="badge rounded-pill bg-danger
               position-absolute top-0 start-0 m-2">
    SALE
  </span>
  <img src="product.jpg" class="card-img-top">
  <div class="card-body">
    <h5>Cool Sneakers
      <span class="badge bg-success">New</span>
    </h5>
  </div>
</div>

Example 3: Form Validation

<div class="alert alert-danger">
  <strong>Please fix these errors:</strong>
  <ul class="mb-0 mt-2">
    <li>Email is required</li>
    <li>Password must be 8+ characters</li>
  </ul>
</div>

The Golden Rules

1. Alerts = Messages - Use them to tell users something important
2. Badges = Labels - Use them to add extra info to elements
3. Colors have meaning - Green = good, Red = bad, Yellow = careful
4. Make it dismissible when the message is temporary
5. Position badges using Bootstrap’s utility classes
6. Always think accessibility - add screen reader text when needed

You Did It! 🎉

Now you know how to:

• ✅ Create colorful alert boxes
• ✅ Add links that match your alerts
• ✅ Include icons for visual clarity
• ✅ Make alerts dismissible with the X button
• ✅ Create badges in any color
• ✅ Make pill-shaped badges
• ✅ Position badges in corners like notification bubbles

These feedback components are like the signs and labels that guide visitors through your website. Use them wisely, and your users will always know what’s happening!