Bootstrap Toasts - Top Right Fixed (+ Fix toast-container overlaping content)

1-css solution-toasts.css

/* https://getbootstrap.com/docs/5.0/components/toasts/ */

.toast-container {
  position: fixed;
  right: 20px;
  top: 20px;
}

.toast:not(.showing):not(.show) {
  display: none !important;
}

/*
<div class="toast-container">
  <div class="toast d-flex align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-body text-success">
      Success!
    </div>
    <button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>
*/

2-updated-solution-bootstrap-5.3.html

<!-- Updating in case you're in Bootstrap 5.3 no custom css required -->
<!-- https://getbootstrap.com/docs/5.3/components/toasts/#placement -->
<!-- Important: position-fixed top-0 end-0 AND position-relative for toast-container  -->
<!-- Important: added .show to .toasts so you can see the toasts without having to trigger them  -->
<div aria-live="polite" aria-atomic="true" class="position-fixed top-0 end-0 z-3">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container position-relative p-3">

      <!-- Then put toasts within -->
      <div class="toast show" role="alert" data-bs-autohide="false" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
              <strong class="me-auto">Bootstrap</strong>
              <small class="text-body-secondary">just now</small>
              <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
              See? Just like this.
          </div>
      </div>

      <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
              <strong class="me-auto">Bootstrap</strong>
              <small class="text-body-secondary">2 seconds ago</small>
              <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
              Heads up, toasts will stack automatically
          </div>
      </div>
  </div>
</div>

Many thanks for this snippet! It is extremely useful!

very useful gist !

Thanks Bro

Thanks

Thanks

Thanks

Thanks

Thanks