Create Custom Alert Messages Using Bootstrap 4 Toasts Component - Toaster

Toaster is a jQuery toast notification plugin for Bootstrap 4 which helps developers easily create customizable alert messages using Bootstrap 4's toasts component.

How to use it:

1. Download and place the JavaScript file bootstrap-toaster.js right before the closing body tag. Make sure you first have jQuery and Bootstrap 4 framework installed on the page.

<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="js/bootstrap-toaster.js"></script>

2. The JavaScript to display a basic toast message on the page.

$.toaster('Hello, world!')

3. Add a title to the toast message.

$.toaster('Hello, world! ', {
  text: 'This is a title'
})

4. Add a sub-title to the toast message.

$.toaster('Hello, world! ', {
  text: 'This is a title',
  info: '11 mins ago'
})

5. Add an image to the toast message.

$.toaster('Hello, world! ', {
  text: 'This is a title',
  image: '1.png'
})

6. Add an icon (CSS classes) the toast message.

$.toaster('Hello, world! ', {
  text: 'This is a title',
  icon: 'fas fa-address-book'
})

7. Customize the position of the toast message. Default: top right.

$.toaster('Hello, world! ', {
  text: 'This is a title',
  position: 'bottom right'
})

---

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