Bootstrap 5 การใช้งาน Toast

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl)
})

toastList.forEach(toast => toast.show());

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

document.addEventListener('DOMContentLoaded', function () {
  var toastEl = document.getElementById('basicToast');
  var toast = new bootstrap.Toast(toastEl);
  toast.show();
});

<div class="toast-container position-fixed top-0 start-0 p-3">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Top Left</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      This toast is shown at the top-left!
    </div>
  </div>
</div>

var toastEl = document.getElementById('basicToast');
var toast = new bootstrap.Toast(toastEl, {
  delay: 5000 // 5 วินาที
});
toast.show();

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Interactive Toast</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      This is an interactive toast notification!
      <button class="btn btn-primary btn-sm mt-2" onclick="performAction()">Click me</button>
    </div>
  </div>
</div>

<script>
  function performAction() {
    alert('Action performed!');
  }
</script>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Toast 1</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      This is the first toast.
    </div>
  </div>

  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Toast 2</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      This is the second toast.
    </div>
  </div>
</div>