Toasts

Toasts are a type of alert messages that are a little more comprehensive than simple alerts. They are designed to look like push notifications with flexible positioning.

Toast Classes

toast

• toast-container
  • toast-header toast-body

Try it

There's two parts to a toast, the button that triggers the toast, which should have an id so that we can target it with JavaScript to make it clickable and display the actual toast.

Toasts will position in line with where they're placed, so there's usually a container designed to position the toast where you want it. It can have a class of toast-container. This container can have more than one toast.

Of course, then you need the container with the toast that you want the button to display. That should also have an ID so that the button can reference it. This should also get a few assistive classes role="alert", aria-live="assertive", aria-atomic="true".

Inside,the toast-container, you can add an optional toast-header which can be colored with background and color classes.

Then toast-body container with the content you want displayed as the text of the toast.

Toast won't be activated by default. This is one instance where you'll need JavaScript to activate and also program the button you want to display the toast with.

document.querySelector("#basicToastBtn").onclick = function() {
 new bootstrap.Toast(document.querySelector('#basicToast')).show();
}

Toast Options

• Show or Hide

  • show hide

• Close

  • btn-close

• Data

  • data-bs-animation data-bs-autohide data-bs-delay

Try it

Here's a few other options that you can add to the toast.

There are two classes that you can add to the container with the class of toast. Show and hide will toggle the display of the toast so it can actually be showing when the page loads.

Also, if you have multiple toasts, they will take up space, so sometimes the hide property can help a toast show up in the right place.

There is an option to have a button that closes the toast, and that's highly recommended. Bootstrap provides a nice btn-close component, but any element that uses a data-bs-dismiss="toast" attribute will work. That should also get an aria-label="Close"

There are a few data attributes you can use

data-bs-animation - controls wether the toasts use an animation sequence. It's pretty subtle, so honestly, I don't think you'll miss it.

data-bs-autohide - The toasts are designed to hide automatically, so you can turn this off.

data-bs-delay - You can also control the delay here, which is important when you add a lot of content to a toast.