Bootstrap Toaster Examples

A Bootstrap Toast Generator that lets you quickly generate highly customizable alert notifications via Bootstrap Toasts component.

Getting Started

myButton.onclick = function () {
    Toast.create("Voila!", "How easy was that?", TOAST_STATUS.SUCCESS, 5000);
}
$.ajax({
    type: "POST",
    url: "https://some-web-api/endpoint",
    data: {
        ...
    },
    success: function (response) {
        response = JSON.parse(response);
        Toast.create("Success", response.message, TOAST_STATUS.SUCCESS, 10000);
    },
    error: function (response) {
        console.error(response);
        Toast.create("Error", response.message, TOAST_STATUS.DANGER);
    }
});

Creating a toast is simple. All you need is a call to Toast.create() to get started. It supports the following 4 parameters

  1. title: The text of the toast's header.
  2. message: The text of the toast's body.
  3. status: The status/urgency of the toast. Affects status icon and ARIA accessibility features. Defaults to 0, which renders no icon and has the same ARIA attributes as success and info toasts
  4. timeout: Time in ms until toast disappears automatically. Defaults to 0, in which case the toast must be manually dismissed.

There are 4 built-in options for toast status in the call to Toast.create(), named after Bootstrap's color convention. They are as follows:

Placement

By default, the toast container will be fixed to the top right corner of the screen on larger screen sizes, and top center on mobile. The Toast.setPlacement() function allows that positioning to be customized. Modifying placement is unique in that it will affect toasts that have already been rendered, because it moves the entire toast container. Top right and top center are most commonly used for notifications, but each of the following placements is supported:

Click each button to move the toast container!

Toast.setPlacement(TOAST_PLACEMENT.MIDDLE_CENTER);
Toast.create("Placement Updated", "Current placement: X", TOAST_STATUS.SUCCESS, 5000);

Theming

Toast.setTheme(TOAST_THEME.LIGHT);
Toast.create("Theme Updated", "Current theme: X", TOAST_STATUS.SUCCESS, 5000);

In supported browsers and operating systems, toasts will automatically choose a theme based on the user's OS settings. However, there may be times where you want to force one theme or the other. In that case, the Toast.setTheme() function is for you! Each toast created after the function is called will have the new theme, but previously rendered toasts will not change themes. Try it out below:

Maximum Toast Count

To avoid becoming a nuisance to users, especially if the creation of toasts is automated, a limit is in place to prevent too many toasts from being visible at once. By default, this limit is 4 toasts, but this can also be changed. The tool of choice is the Toast.setMaxCount() function. Below is an example of raising toast limit to 6 toasts. 

Toast.setMaxCount(6);

Toast Timers

Perhaps you aren't a fan of the elapsed timers on each toast, or would like to save every resource you can by not running the timers in the background. Luckily, there's a function for that, too. Introducing Toast.enableTimers(): 

Toast.enableTimers(false);

Note on Accessibility

The toast container is setup as an aria-live region, so changes to its descendant elements will alert screen readers. Success and Info toasts will read out when the user is not busy, leaving their flow uninterrupted, while Error and Warning toasts will read out immediately. In addition, all toast status icons and elapsed timers are hidden to screen readers, as they are purely visual indicators. Provided you properly use the statuses, all the accessibility work is done for you!