MENU


Toast

A toast is a translucent notification message box.

(By repeating the HTML markup, multiple toasts can be easily and nicely stacked without overlapping.)
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

    <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
    <div class="toast-container position-fixed bottom-0 end-0 p-3" style="border:none">
      <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <img src="/shared/frog.jpg" class="rounded mr-2"  alt="frog" width="60">
          <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>
    </div>
    <script>
    const toastTrigger = document.getElementById('liveToastBtn')
    const toastLiveExample = document.getElementById('liveToast')
    if (toastTrigger) {
      toastTrigger.addEventListener('click', () => {
        const toast = new bootstrap.Toast(toastLiveExample)

        toast.show()
      })
    }
    </script>

</body><html>
With some CSS, you can position the toast anywhere besides the upper left corner. You can style the toast with utility classes too. Consider using a wrapper element to easily stack multiple toasts.
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

    <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px; border:none;">
      <div class="toast" style="position: absolute; top: 0; right: 0;">
          <div class="toast-header">
            <img src="/shared/frog.jpg" class="rounded mr-2" alt="frog">
            <strong class="mr-auto">Bootstrap</strong>
            <small>11 mins ago</small>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="toast-body">
            Hello, world! This is a toast message.
          </div>
      </div>
    </div>
    <script>
    var toastList = [].slice.call(document.querySelectorAll('.toast')).map(function (toastEl) {
        var toast = new bootstrap.Toast(toastEl);
        toast.show();
    })
    </script>

</body><html>

Options:
animation: Apply a CSS fade transition to the toast. Defaults to 'true'.
autohide: Autohide the toast. Defaults to 'true'.
delay: Delay the hiding of the toast. Defaults to '500' (ms).

JavaScript:

toast.show(); toast.hide(); toast.dispose(); toastEl.addEventListener('show.bs.toast', function () { // do something...}); toastEl.addEventListener('shown.bs.toast', function () { // do something...}); toastEl.addEventListener('hide.bs.toast', function () { // do something...}); toastEl.addEventListener('hidden.bs.toast', function () { // do something...});