Bootstrap 5 Toast & Snackbar Manager - jQuery Toast.js

This is the upgraded version of the Script47's jQuery Toast plugin that helps you generate Android style snackbars and toasts in the fresh new Bootstrap 5 framework.

How to use it:

1. Load the latest jQuery library (slim build) and Bootstrap 5 toast plugin in your Bootstrap 5 project.

<!-- 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 snackbar using the snack method.

// $.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 using the toast method.

$.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: '',
  }
  
};

Changelog:

2022-03-17

• Bugfix

---

This awesome jQuery plugin is developed by chrisgo. For more Advanced Usages, please check the demo page or visit the official website.