Utilizor
HomeBootstrap 5 BasicsBS5 Toast

BBS5 Toast

Learn how to create toasts.

BS5 Toast

The Toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).

Initialization

Toasts need to be initialized with JavaScript: var toastList = toastElList.map(function (toastEl) { return new bootstrap.Toast(toastEl, option) }).

To show a toast, use the .show() method.

Examples

Basic Toast

html/css

A visible toast message.

<div class="toast show">
  <div class="toast-header">
    <strong class="me-auto">Toast Header</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Some text inside the toast body
  </div>
</div>

Toast Placement

html/css

Positioning the toast in the bottom right corner.

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">...</div>
    <div class="toast-body">...</div>
  </div>
</div>

Test Your Knowledge

1. Which method creates a toast notification?

2. Toasts close automatically by default.