This time I will share jQuery Plugin and tutorial about Create Custom Alert Messages Using Bootstrap 4 Toasts Component – Toaster, hope it will help you in programming stack.
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.
1 |
<script src="/path/to/jquery.slim.min.js"></script> |
2 |
<script src="/path/to/bootstrap.min.js"></script> |
3 |
<script src="js/bootstrap-toaster.js"></script> |
2. The JavaScript to display a basic toast message on the page.
1 |
$.toaster('Hello, world!') |
3. Add a title to the toast message.
1 |
$.toaster('Hello, world! ', { |
2 |
text: 'This is a title' |
4. Add a sub-title to the toast message.
1 |
$.toaster('Hello, world! ', { |
2 |
text: 'This is a title', |
5. Add an image to the toast message.
1 |
$.toaster('Hello, world! ', { |
2 |
text: 'This is a title', |
6. Add an icon (CSS classes) the toast message.
1 |
$.toaster('Hello, world! ', { |
2 |
text: 'This is a title', |
3 |
icon: 'fas fa-address-book' |
7. Customize the position of the toast message. Default: top right.
1 |
$.toaster('Hello, world! ', { |
2 |
text: 'This is a title', |
3 |
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.
