Bootstrap Toasts

Look!

Bootstrap 5 is far away from now.

It's an experimental build and it may break in the future.

This page shows that the plugin will work once Bootstrap drops jQuery.

Demo

function showRandomToast(pause_on_hover = false) {
    let type = TYPES[Math.floor(Math.random() * TYPES.length)],
        title = TITLES[type],
        content = CONTENT[type];
    new BsToast({
        title: title,
        subtitle: '11 mins ago',
        content: content,
        type: type,
        pause_on_hover: pause_on_hover,
        delay: 5000,
        position: 'top-right',
        icon: '<i class="fas fa-home"></i>'
    });
}

Demo 2

Pause on Hover View code

function showRandomToast(pause_on_hover = false) {
    let type = TYPES[Math.floor(Math.random() * TYPES.length)],
        title = TITLES[type],
        content = CONTENT[type];
    new BsToast({
        title: title,
        subtitle: '11 mins ago',
        content: content,
        type: type,
        pause_on_hover: pause_on_hover,
        delay: 5000,
        position: 'top-right'
    });
}

Demo 3

Show Image Toast View code

function showImageToast() {
    let type = TYPES[Math.floor(Math.random() * TYPES.length)],
        title = TITLES[type],
        content = CONTENT[type];
    new BsToast({
        title: title,
        subtitle: '11 mins ago',
        content: content,
        type: type,
        delay: 5000,
        position: 'top-right',
        img: {
            src: 'https://via.placeholder.com/25',
            class: 'rounded',
            title: 'Thumbnail Title',
            alt: 'Alternative'
        }
    });
}

Demo 4

Show Random Snack View code

function showSnackToast() {
    let type = TYPES[Math.floor(Math.random() * TYPES.length)],
        content = CONTENT[type].replace('toast', 'snack');
    new BsToast({
        title: content,
        type: type,
        delay: 5000,
        position: 'bottom-left'
    });
}

Demo 5

Show custom toast View code

.myclass .toast-header {
  background-color: #000000;
  color: #fff;
}

.myclass .toast-header .close {
  color: #fff;
}
.myclass .toast-body {
  background-color: #212121;
  color: #fff;
}

function showCustomToast() {
    let type = TYPES[Math.floor(Math.random() * TYPES.length)],
        title = TITLES[type],
        content = CONTENT[type];
    new BsToast({
        title: title,
        subtitle: '11 mins ago',
        content: content,
        type: type,
        pause_on_hover: true,
        delay: 5000,
        position: 'top-right',
        customClass: 'myclass'
    });
}