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.

  • It makes Bootstrap 5.x Toast easier to use
  • JQuery 3.x requires
  • TODO: Placement/Position is hard coded 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

Must Read – An Unobtrusive Toast Module For Angular | ngx-toastit

How to make use of it:

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

<!-- 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 snack bars 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

Read More – 

Vue.js Plugin for Snackbars Based On Google Material
A Library of Material Notification With Javascript And CSS | MaterialNotify


See Demo And Download

Official Website(chrisgo): Click Here

This superior jQuery/javascript plugin is developed by chrisgo. For extra Advanced Usage, please go to the official website.

Share