Toast

Fixed-position notifications using alert styling — 6 positions, 11 colors.

← Back to examples

Trigger toasts

Click a button to show a toast in the corresponding position. It auto-removes after 4 seconds.

Color variants

Toasts reuse .alert .alert-{variant} for content styling.

With title and dismiss button

Static examples

Below are static (non-fixed) toasts for reference. In real use, these are fixed-positioned.

This is a success toast.

Heads up!

This toast has a title and is dismissible.

This is a warning toast.

This is an error toast.

Usage

<div class="toast toast-top-right">
  <div class="alert alert-success" role="alert">
    <p>Changes saved.</p>
  </div>
</div>