Create Bootstrap 5 Toasts Dynamically – bootstrap-show-toast

Preview:

Description:

bootstrap-show-toast is a vanilla JavaScript plugin that lets you create Bootstrap 5 powered toast notifications dynamically.

How to use it:

1. Download and import the bootstrap-show-toast.js in your Bootstrap 5 project.

<!-- Bootstrap 5 -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
<!-- bootstrap-show-toast -->
<script src="./src/bootstrap-show-toast.js"></script>

2. Create a Bootstrap 5 toast using the following parameters:

• header: Header text
• headerSmall: Additional text displayed in the header
• body: Toast message
• closeButton: Shows a close button
• closeButtonLabel: The label of the close button
• closeButtonClass: Additional CSS class for the close button
• toastClass: Additional CSS class for the toast box. Supports Bootstrap 5 CSS color unilities
• animation: Enables animations
• delay: Auto dimisses the toast after this timeout
• position: Position classes
• direction: Or “prepend”
• ariaLive: ARIA live attribute

bootstrap.showToast({
  header: "",
  headerSmall: "",
  body: "", 
  closeButton: true, 
  closeButtonLabel: "close",
  closeButtonClass: "", 
  toastClass: "",
  animation: true,
  delay: 5000,
  position: "top-0 end-0", 
  direction: "append",
  ariaLive: "assertive",
})

Changelog:

v1.1.5 (07/22/2023)

• deprecated the zIndex property