Bootstrap Alerts and Badges

<!-- Contextual alerts -->
<div class="alert alert-primary" role="alert">
  A simple primary alert — check it out!
</div>
<div class="alert alert-secondary" role="alert">Secondary alert</div>
<div class="alert alert-success" role="alert">
  ✅ <strong>Success!</strong> Your changes have been saved.
</div>
<div class="alert alert-danger" role="alert">
  ❌ <strong>Error!</strong> Something went wrong. Please try again.
</div>
<div class="alert alert-warning" role="alert">
  ⚠️ <strong>Warning!</strong> Your session expires in 5 minutes.
</div>
<div class="alert alert-info" role="alert">
  ℹ️ <strong>Info:</strong> A new version is available.
</div>

<div class="alert alert-success">
  <h4 class="alert-heading">Well done! 🎉</h4>
  <p>Your account has been created successfully. You can now access all features.</p>
  <hr />
  <p class="mb-0">
    Go to your <a href="#" class="alert-link">Dashboard</a> to get started.
  </p>
</div>

<div class="alert alert-danger">
  <strong>Payment Failed</strong>
  <ul class="mb-0 mt-2">
    <li>Insufficient funds</li>
    <li>Card expiry date is incorrect</li>
  </ul>
</div>

<!-- Dismissible alert (adds × button) -->
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  ⚠️ Your trial period ends in <strong>3 days</strong>. Please upgrade to continue.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<div class="alert alert-info alert-dismissible fade show" role="alert">
  📢 New feature: Dark mode is now available in settings.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Badges on headings -->
<h1>Notifications <span class="badge bg-danger">4</span></h1>
<h2>Messages <span class="badge bg-primary">12</span></h2>

<!-- Status badges -->
<span class="badge bg-success">Active</span>
<span class="badge bg-warning text-dark">Pending</span>
<span class="badge bg-danger">Cancelled</span>
<span class="badge bg-secondary">Draft</span>
<span class="badge bg-info text-dark">Processing</span>

<!-- Pill badges (rounded) -->
<span class="badge rounded-pill bg-primary">New</span>
<span class="badge rounded-pill bg-danger">99+</span>

<!-- Badge on button (notification count) -->
<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">
    8 <span class="visually-hidden">unread messages</span>
  </span>
</button>

<!-- Badge on icon button -->
<button class="btn btn-outline-secondary position-relative">
  🛒 Cart
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary">
    3
  </span>
</button>

<!-- Toast container (fixed position) -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">

  <!-- Success toast -->
  <div id="successToast" class="toast align-items-center text-white bg-success border-0" role="alert">
    <div class="d-flex">
      <div class="toast-body">
        ✅ Profile updated successfully!
      </div>
      <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
    </div>
  </div>

  <!-- Toast with icon -->
  <div id="infoToast" class="toast" role="alert">
    <div class="toast-header">
      <span class="rounded me-2 bg-primary" style="width:20px;height:20px;display:inline-block;border-radius:3px;"></span>
      <strong class="me-auto">Notification</strong>
      <small>Just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      You have a new message from Alice.
    </div>
  </div>

</div>

<!-- Trigger toasts with JS -->
<button class="btn btn-success" onclick="showToast(&#039;successToast')">Show Success Toast</button>
<button class="btn btn-primary" onclick="showToast(&#039;infoToast')">Show Info Toast</button>

<script>
  function showToast(id) {
    const el = document.getElementById(id);
    const toast = new bootstrap.Toast(el, { autohide: true, delay: 3000 });
    toast.show();
  }
</script>