bootstrap-alert

A lightweight Bootstrap 5 toast notification library that provides a modern alternative to alert().

Installation

To use locally, install via npm:

npm install bootstrap-alert

... and add this to your script:

import { bootstrapAlert } from "./node_modules/bootstrap-alert/dist/bootstrap-alert.js";

To use via CDN, add this to your script:

import { bootstrapAlert } from "https://cdn.jsdelivr.net/npm/bootstrap-alert@1";

Usage

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 });

API

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:

• Error if Bootstrap 5 is not loaded
• Error if body parameter is not provided

Development

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

Release notes

• 1.1.1: 31 Jun 2025. Standardized package.json & README.md
• 1.0.0: 25 Jun 2025. Initial release

License

MIT