Create Alert Notifications Using Bootstrap Toasts - Toaster

Create Alert Notifications Using Bootstrap Toasts - Toaster
File Size: 4.45 MB
Views Total: 502
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

This is a jQuery based, developer-friendly Bootstrap Toast Generator that lets you quickly generate highly customizable alert notifications via Bootstrap Toasts component.

Bootstrap 5 Version is now AVAILABLE HERE.

Features:

  • Light & Dark themes.
  • Auto dismisses toasts after a timeout.
  • 5 status: success, danger, error, info, default.
  • 9 position options.
  • Bootstrap Icons.
  • Built with keyboard and screen reader accessibility in mind.
  • Supports both Bootstrap 4 and Bootstrap 5

See Also:

How to use it:

1. Load the necessary jQuery library, Bootstrap framework, and Bootstrap Icons in the document.

<!-- Bootstrap 4 or 5 Stylesheet -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap-icons.css" />
<!-- jQuery Is Required For Bootstrap 4 -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Bootstrap 4 or 5 JavaScript -->
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

2. Load the Bootstrap Toaster's files.

<link rel="stylesheet" href="/path/to/bootstrap-toaster.css" />
<script src="/path/to/bootstrap-toaster.min.js"></script>

3. Generate a Bootstrap toast with the following parameters:

  • title: Toast title
  • message: Toast message
  • status: 1(SUCCESS), 2(DANGER), 3(WARNING), 4(INFO)
  • timeout: Auto dismiss after this timeout
// Toast.create(title, message, status = 0, timeout = 0)
Toast.create("Title", "Toast Message", TOAST_STATUS.SUCCESS, 5000)

4. By default, the toast container will be fixed to the top right corner of the screen on larger screen sizes, and top center on mobile. The Toast.setPlacement() function allows that positioning to be customized. Modifying placement is unique in that it will affect toasts that have already been rendered, because it moves the entire toast container. Top right and top center are most commonly used for notifications, but each of the following placements is supported:

  • TOP_LEFT: 1
  • TOP_CENTER: 2
  • TOP_RIGHT: 3
  • MIDDLE_LEFT: 4
  • MIDDLE_CENTER: 5
  • MIDDLE_RIGHT: 6
  • BOTTOM_LEFT: 7
  • BOTTOM_CENTER: 8
  • BOTTOM_RIGHT: 9
Toast.setPlacement(TOAST_PLACEMENT.MIDDLE_CENTER);

5. In supported browsers and operating systems, toasts will automatically choose a theme based on the user's OS settings. However, there may be times where you want to force one theme or the other. In that case, the Toast.setTheme() function is for you! Each toast created after the function is called will have the new theme, but previously rendered toasts will not change themes.

// Light Theme
Toast.setTheme(TOAST_THEME.LIGHT);

// Dark Theme
Toast.setTheme(TOAST_THEME.DARK);

6. Set the maximum number of toasts allowed to display at a time. Default: 4.

Toast.setMaxCount(10);

7. Enable & disable elapsed timers.

Toast.enableTimers(true/false);

8. You're also allowed to set options globally using the Toast.configure function.

Toast.configure(maxToasts = null, placement = TOAST_PLACEMENT.TOP_RIGHT, theme = null, enableTimers = true)

Changelog:

2021-05-06

  • Supports the latest Bootstrap 5 framework.

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