Bootstrap 5 Toast & Snackbar Easier to Use

bootstrap5-toast is the upgraded version of the jQuery plugin that helps you create Android-style light bars and toast in the new Bootstrap 5 framework.

bootstrap 4 toast notification, bootstrap 5 toast example, bootstrap toast notification jquery, bootstrap snackbar, bootstrap notify, javascript toast message example

It makes Bootstrap 5.x Toast easier to use
JQuery 3.x requires
TODO: Placement/Position is hardcoded to top-right top-0 start-0
TODO: Rounded square in the toast-header similar to Bootstrap documentation
TODO: Image
TODO: Investigate delay, does not seem to be working

How to make use of it:

1. Load the newest jQuery library and Bootstrap 5 toast plugin in your Bootstrap 5.

<!-- Bootstrap 5 -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
<!-- jQuery -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- Bootstrap 5 Toast -->
<script src="/path/to/dist/toast.min.js"></script>

2. Create a snack bar utilizing the snack technique.

// $.snack(type, content, delay)
// type: 'info', 'warning', 'success', 'error'
// always shown
$.snack('info', 'Snackbar');
// auto dimiss after 3 seconds
$.snack('info', 'Snackbar', 3000);

3. Create a toast message utilizing the toast technique.

$.toast({
  type: 'info',
  title: 'Title',
  subtitle: '11 mins ago',
  content: 'Toast message.',
  delay: 5000,
  img: {
    src: '/path/to/img.',
    class: 'yourClass',
    alt: 'Image Alt'
  }
});

4. Config the toasts and snackbars by overriding the default parameters:

$.toastDefaults = {
  // top-left, top-right, bottom-left, bottom-right, top-center, and bottom-center
  position: 'top-right',
  // is dismissable?
  dismissible: true,
  // is stackable?
  stackable: true,
  // pause delay on hover
  pauseDelayOnHover: true,
  // additional CSS Classes
  style: {
    toast: '',
    info: '',
    success: '',
    warning: '',
    error: '',
  }
};

Bootstrap 5 Toast & Snackbar Manager, bootstrap5-toast Plugin/Github, bootstrap notification, bootstrap notification bubble