Bootstrap 4 Toasts Component Manager - jQuery Toast

The jQuery Toast plugin makes it easier to create customizable toast-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 toasts without writing any HTML codes.

See also:

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 the Bootstrap toasts with the following parameters:

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

$.toast({
  title: 'Notice!',
  subtitle: '11 mins ago',
  content: 'This is a toast message.',
  type: 'info',
  delay: 3000
});

3. Remove the toast notification from the DOM.

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

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