Bootstrap 4 Toasts Component Manager - jQuery Toast

The jQuery Toast plugin makes it easier to create customizable toast- and snackbar-style temporary alert messages on the webpage using Bootstrap 4 toasts component.

The plugin gives you the ability to quickly and dynamically create Bootstrap 4 based toasts and snackbars without writing any HTML codes.

Bootstrap 5 Version is now Available Here.

See also:

• Best Toast Notification jQuery Plugins
• Best Toast Notification JavaScript Libraries

Install & Download:

# NPM
$ npm install bs4-toast --save

How to use it:

1. Insert the stylesheet toast.min.css and JavaScript toast.min.js into the Bootstrap 4 project.

<!-- CSS -->
<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link rel="stylesheet" href="/path/to/toast.min.css">

<!-- JavaScript -->
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/popper.min.js"></script>
<script src="/path/to/bootstrap.min.js" ></script>
<script src="/path/to/toast.min.js"></script>

2. Create a snackbar with the following parameters:

• title: alert title
• type: 'info', 'success', 'warning', 'error'
• delay: auto dismiss after this timeout

$.snack(type, title, delay)

3. Create a toast notification with the following parameters:

• title: alert title
• subtitle: subtitle
• content: alert message
• type: 'info', 'success', 'warning', 'error'
• delay: auto dismiss after this timeout
• img: an object containging image information
• pause_on_hover: pause on hover
• id: unique ID

$.toast({
  title: 'Notice!',
  subtitle: '11 mins ago',
  content: 'This is a toast message.',
  type: 'info',
  delay: 3000,
  dismissible: true,
  img: {
    src: 'image.png',
    class: 'rounded',
    title: 'Thumbnail Title',
    alt: 'Alternative'
  }
});

4. Global settings.

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

5. Remove the toast notification from the DOM.

$(document).on('hidden.bs.toast', '.toast', function (e) {
  $(this).remove();
});

Changelog:

v1.2.0 (2020-11-26)

• Allows the ability to add an ID
• Removes babel

v1.1.0 (2020-06-27)

• Added support for top-center and bottom-center.

v1.0.0 (2020-06-25)

• Added globals for further customisation
• Added the ability to modify toast styling
• Refactored rendering code to make it cleaner
• Added styles for positioning
• and more...

2019-10-21

• set toast-wrapper z-index to 1055 and updated minified css

v0.7.1 (2019-05-31)

• Updated

v0.7.0 (2019-05-07)

• Added Pause On Hover

v0.6.0 (2019-03-19)

• Allow img in toast
• Autoremove toast from DOM once hidden
• Added NPM

2019-03-03

• JS & CSS update

---

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