🔥 Bootstrap Bonus Features

This is where the fun starts — beyond the basics. We’re talking about badges, spinners, responsive utilities, and slick stuff like toasts & scrollspy. These features can really spice up your UI!

Reference: Bootstrap Components Docs

🎯 Bonus UI Features Preview

Edit or test these bonus features live:

<div class="container my-4">
  <h3>Badge + Spinner</h3>
  <button class="btn btn-warning position-relative">
    Messages
    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
      9+
    </span>
  </button>
  <div class="mt-3">
    <div class="spinner-border text-primary" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>

<hr>

<h3>Toast Alert</h3>
  <button class="btn btn-success" onclick="bootstrap.Toast.getOrCreateInstance(document.getElementById('liveToast')).show()">Show Toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <strong class="me-auto">Bootstrap</strong>
        <small>Now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        This is a live toast message.
      </div>
    </div>
  </div>
</div>

💡 Tip: Use position-relative + position-absolute for sweet overlays, and the .toast component for non-intrusive notifications. It’s smoother UX than alerts.