Bootstrap Toaster

A lightweight and customizable toast notification library built on top of Bootstrap 5

Features

• Automatically stack multiple toasts and hides them after a timeout
• Supports HTML content.
• Customizable themes.
• Provides helper methods for common toast types (success, warning, danger, info, primary).
• Includes a "Close All" feature to close multiple visible toasts at once
• Emits custom events for toast actions.

Installation

1. Include the Bootstrap 5 CSS and JS files in your HTML:

<linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

2. Include the Toaster script after Bootstrap:

<scriptsrc="path/to/bootstrap-toaster.js"></script>

Usage

Showing a Simple Toast

Toast('Hello World');

Shortcuts for Standard Toasts

ToastSuccess('This is a Success!');ToastWarning('This is a Warning!');ToastDanger('This is a Danger!');ToastInfo('This is an Info!');ToastPrimary('This is a Primary!');

Custom Toast with Options

info color with allowed html and hide delayed up to 7s

Toast('Custom <b>Bold</b> Message',{theme: 'text-bg-info',html: true,delay: 7000});

Custom Events

Toast events can be listened to on the document body for actions like toast.shown, toast.hidden, and toast.hidden.all.

document.body.addEventListener('toast.shown',function(event){console.log('Toast shown:',event.detail.message);});document.body.addEventListener('toast.hidden',function(event){console.log('Toast hidden:',event.detail.message);});document.body.addEventListener('toast.hidden.all',function(event){console.log('All toasts hidden');});

API

Toast(message, options)

• message (string): The content of the toast.
• options (object): Optional settings for the toast.

Options

• theme (string): The Bootstrap theme class for the toast (e.g., text-bg-success, text-bg-danger).
• animation (boolean): Whether to animate the toast (default: true).
• autohide (boolean): Whether the toast should automatically hide (default: true).
• delay (number): Delay in milliseconds before the toast hides (default: 5000).
• html (boolean): Whether the message is HTML content (default: false).