Create Bootstrap 5 Toasts Dynamically – bootstrap-show-toast

Category: Javascript , Notification | July 22, 2023
Views Total:895 views
Official Page:Go to website
Last Update:July 22, 2023


Create Bootstrap 5 Toasts Dynamically – bootstrap-show-toast


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
  header: "",
  headerSmall: "",
  body: "", 
  closeButton: true, 
  closeButtonLabel: "close",
  closeButtonClass: "", 
  toastClass: "",
  animation: true,
  delay: 5000,
  position: "top-0 end-0", 
  direction: "append",
  ariaLive: "assertive",


v1.1.5 (07/22/2023)

  • deprecated the zIndex property

You Might Be Interested In:

Leave a Reply