A lightweight Bootstrap 5 toast notification library that provides a modern alternative to alert().
Add this to your script:
import { bootstrapAlert } from "bootstrap-alert";To use via CDN, add this to your HTML file:
<script type="importmap">
{
"imports": {
"bootstrap-alert": "https://cdn.jsdelivr.net/npm/bootstrap-alert@1"
}
}
</script>To use locally, install via npm:
npm install bootstrap-alert... and add this to your HTML file:
<script type="importmap">
{
"imports": {
"bootstrap-alert": "./node_modules/bootstrap-alert/dist/bootstrap-alert.js"
}
}
</script>import { bootstrapAlert } from "https://cdn.jsdelivr.net/npm/bootstrap-alert@1";
// Simple toast
bootstrapAlert("Simple message");
// Custom toast: with title and color
bootstrapAlert({ title: "Success", body: "Custom toast message", color: "success" });
// Replace toast: clears previous ones
bootstrapAlert({ body: "This replaces previous toast", replace: true });
// Bottom left position
bootstrapAlert({ title: "Position", body: "Bottom start", position: "bottom-0 start-0" });
// Top right position
bootstrapAlert({ title: "Position", body: "Bottom start", position: "top-0 end-0" });
// HTML toast: with icons / formatting
bootstrapAlert({ title: '<i class="bi bi-cake2"></i> Congts!', body: "Well <u>done</u>!" });
// Don't hide: Keep toast on screen until dismissed
bootstrapAlert({ body: "Stays on screen", autohide: false });
// Quick hide: Change the delay before timeout
bootstrapAlert({ body: "Vanishes quickly", delay: 500 });bootstrapAlert(options) creates and displays a Bootstrap toast notification.
| Option | Type | Default | Description |
|---|---|---|---|
body |
string | required | Toast message text/HTML |
title |
string | Toast header text/HTML | |
color |
string | Bootstrap color variant (primary, success, danger, warning, info) | |
replace |
boolean | false | If true, replaces previous toasts; else, appends toast |
position |
string | 'top-0 end-0' | Toast position {top/start/bottom/end}-{0/50/100}. Persists |
delay |
number | 5000 | Delay in milliseconds before hiding the toast |
autohide |
boolean | true | Automatically hide the toast after the delay |
animation |
boolean | true | Apply a CSS fade transition to the toast |
Throws:
Errorif Bootstrap 5 is not loadedErrorif body parameter is not provided
git clone https://github.com/sanand0/bootstrap-alert.git
cd bootstrap-alert
npm install
npm run lint && npm run build && npm test
npm publish
git commit . -m"$COMMIT_MSG"; git tag $VERSION; git push --follow-tags