BS5 Toast

What is a toast?

A toast is a small notification popup used for non-blocking feedback such as success messages or status updates.

Basic toast markup

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

  <div id="demoToast" 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"></button>
    </div>
    <div class="toast-body">
      This is a toast message.
    </div>
  </div>

</div>

Show toast with JavaScript

const el = document.getElementById('demoToast');
const toast = new bootstrap.Toast(el);
toast.show();

Auto-hide and delay

const toast = new bootstrap.Toast(el, { autohide: true, delay: 3000 });
toast.show();

Placement utilities

Toasts are positioned using normal utility classes.

top-0 start-0
top-0 end-0
bottom-0 start-0
bottom-0 end-0

Best practices

• Use toasts for non-critical notifications
• Keep messages short and actionable
• Do not spam multiple toasts at once