Bootstrap 4 Toasts Component Manager - jQuery Toast

Bootstrap 4 Toasts Component Manager - jQuery Toast
File Size: 9.06 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

Install & Download:

# NPM
$ npm install bs4-toast --save

How to use it:

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

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
  • img: an object containging image information
  • pause_on_hover: pause on hover
$.toast({
  title: 'Notice!',
  subtitle: '11 mins ago',
  content: 'This is a toast message.',
  type: 'info',
  delay: 3000,
  img: {
    src: 'image.png',
    class: 'rounded',
    title: 'Thumbnail Title',
    alt: 'Alternative'
  },
  pause_on_hover: false
});

3. Remove the toast notification from the DOM.

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

Changelog:

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


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