https://github.com/sanand0/bootstrap-alert
A lightweight Bootstrap toast notification alternative to alert()
https://github.com/sanand0/bootstrap-alert
library
Last synced: 6 months ago
JSON representation
A lightweight Bootstrap toast notification alternative to alert()
- Host: GitHub
- URL: https://github.com/sanand0/bootstrap-alert
- Owner: sanand0
- License: mit
- Created: 2025-06-24T16:16:30.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-31T05:55:35.000Z (11 months ago)
- Last Synced: 2025-08-30T13:54:53.165Z (10 months ago)
- Topics: library
- Language: HTML
- Homepage: https://sanand0.github.io/bootstrap-alert/
- Size: 64.5 KB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# bootstrap-alert
[](https://www.npmjs.com/package/bootstrap-alert)
[](https://getbootstrap.com/)
[](https://opensource.org/licenses/MIT)
[](https://bundlephobia.com/package/bootstrap-alert)
A lightweight [Bootstrap 5](https://getbootstrap.com/docs/5.3/) toast notification library that provides a modern alternative to `alert()`.
## Installation
Add this to your script:
```js
import { bootstrapAlert } from "bootstrap-alert";
```
To use via CDN, add this to your HTML file:
```html
{
"imports": {
"bootstrap-alert": "https://cdn.jsdelivr.net/npm/bootstrap-alert@1"
}
}
```
To use locally, install via `npm`:
```bash
npm install bootstrap-alert
```
... and add this to your HTML file:
```html
{
"imports": {
"bootstrap-alert": "./node_modules/bootstrap-alert/dist/bootstrap-alert.js"
}
}
```
## Usage
```js
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: ' Congts!', body: "Well done!" });
// 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 });
```
[](bootstrap-alert.html ":include")
## 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
```bash
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](https://npmjs.com/package/bootstrap-alert/v/1.1.1): 31 Jun 2025. Standardized package.json & README.md
- [1.0.0](https://npmjs.com/package/bootstrap-alert/v/1.0.0): 25 Jun 2025. Initial release
## License
[MIT](LICENSE)