bs-toaster is a simple to instantiate bs-toaster and create multiple toasts effortlessly using native Bootstrap 5!
Feature Facts
- Small and clean
- Modern browser support. No IE sorry
- 💥 Support of custom icon markup 💥 🤘
Must Read: Stylesheet For Implementing Dark Mode with Bootstrap
How to make use of it:
1. Download the necessary Bootstrap 5 framework.
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/bootstrap.min.js"></script>
2. Install and import bs-toaster components.
# Yarn $ yarn add bs-toaster # NPM $ npm i bs-toaster
import {
Toaster,
ToasterPosition,
ToasterTimer,
ToasterType,
} from "bs-toaster";3. Initialize the BS-toaster.
const myToaster = new Toaster();
4. Show a toast with a custom title and message on the screen.
myToaster.create("Title", "Message Here");5. Customize the toast.
myToaster.create("Title", "Message Here", {
// DEFAULT, SUCCESS, DANGER, INFO, PRIMARY, WARNING, DARK
type: ToasterType.DANGER,
// ELAPSED, COUNTDOWN
timer: ToasterTimer.COUNTDOWN,
// Delay hiding the toast (ms)
delay: 5000,
// Enable/disable animation
animation: false,
// Custom toast icon
defaultIconMarkup: '<i class="p-2 me-2 rounded %TYPE%"></i>',
})6. You can also pass the options to the toaster function during preparation.
const myToaster = new Toaster({
// DEFAULT, SUCCESS, DANGER, INFO, PRIMARY, WARNING, DARK
type: ToasterType.DANGER,
// ELAPSED, COUNTDOWN
timer: ToasterTimer.COUNTDOWN,
// Delay hiding the toast (ms)
delay: 5000,
// Enable/disable animation
animation: false,
// Custom toast icon
defaultIconMarkup: '<i class="p-2 me-2 rounded %TYPE%"></i>',
});Supported Browsers
Options
| Property | Values | Description |
|---|---|---|
| position | ENUM | Can be one of the ToasterPostion values. Default: ToasterPosition.BOTTOM_END |
| type | ENUM | Can be one of the ToasterType values. This value describes the default type when no type is given in creation. Possible Values: DEFAULT, SUCCESS, DANGER, INFO, PRIMARY, WARNING, DARK Default: ToasterType.DEFAULT |
| timer | ENUM | Can be one of the ToasterTimer values. Describes how the time will be displayed on the right side of the toast. Default: ToasterTimer.ELAPSED |
| delay | Number | Describes after how many milliseconds the toast should disappear. Default: 5000 |
| defaultIconMarkup | String | If you want to change the look of the icon of the toast header you can do it here. Remember to insert the “%TYPE%” for better class control. Default:Â <i class="p-2 me-2 rounded %TYPE%"></i> |
See Demo And Download
Official Website(hummal): Click Here
This superior jQuery/javascript plugin is developed by hummal. For extra Advanced Usage, please go to the official website.