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

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

Many thanks for this snippet! It is extremely useful!

very useful gist !

Thanks Bro

Thanks

Thanks

Thanks