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>

BBS5 Toast

BS5 Toast

Initialization

Examples

Basic Toast

Toast Placement

Test Your Knowledge

1. Which method creates a toast notification?

2. Toasts close automatically by default.

Utilizor Digital Network Hub

Productivity Engines

Development Global Reach

Local Ranking Ecosystems

Enterprise Growth Knowledge

BBS5 Toast

BS5 Toast

Initialization

Examples

Basic Toast

Toast Placement

Test Your Knowledge

1. Which method creates a toast notification?

2. Toasts close automatically by default.