Dynamic Bootstrap 5 Toasts Creation With jQuery bs-toast.js

bs-toast.js is a small jQuery plugin that allows you to create and manage Bootstrap 5's Toast components with ease.

It helps you create highly customizable toast notifications with the ability to specify the title, message, type, placement, and more.

How to use it:

1. Include the necessary jQuery library, Bootstrap 5 framework, and Bootstrap Icons in your document:

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<link rel="stylesheet" href="/path/to/cdn/bootstrap-icons.min.css">
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Download and add the bs-toast.js script to your document:

<script src="dist/bs-toast.min.js"></script>

3. Initialize the bsToast and specify the title and message for the toast:

$.bsToast({
  title: 'Toast Title',
  message: 'Toast Message.',
});

4. Change the notification type by specifying the 'type' option. Available types: 'info', 'warning', 'success', 'danger', 'light', 'dark', 'primary', 'secondary'.

$.bsToast({
  title: 'Toast Title',
  message: 'Toast Message.',
  type: 'danger',
});

5. Set the placement of the toast notification by using the 'placement' option. Available placement options: 'ts', 'tc', 'te', 'ms', 'mc', 'me', 'bs', 'bc', 'be'.

$.bsToast({
  title: 'Toast Title',
  message: 'Toast Message.',
  placement: 'tc', // top center
});

6. More configuration options:

$.bsToast({
  title: 'Toast Title',
  message: 'Toast Message.',
  start: 0,
  delay: 5000,
  autoHide: true,
  animation: true,
  staticBackdrop: false,
});

7. Define callback functions for the toast events:

$.bsToast({
  title: 'Toast Title',
  message: 'Toast Message.',
  onShow: function() {
    // do something
  },
  onShown: function() {
    // do something
  },
  onHide: function() {
    // do something
  },
  onHidden: function() {
    // do something
  },
});

---

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