A Bootstrap 5 Toast Notification Framework Library | bs-toaster

bootstrap-5-bs-toaster

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

  • Chrome 75+
  • Firefox 78+
  • Safari 14
  • Edge 90

Options

PropertyValuesDescription
positionENUMCan be one of the ToasterPostion values.
Default: ToasterPosition.BOTTOM_END
typeENUMCan 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
timerENUMCan be one of the ToasterTimer values. Describes how the time will be displayed on the right side of the toast.
Default: ToasterTimer.ELAPSED
delayNumberDescribes after how many milliseconds the toast should disappear.
Default: 5000
defaultIconMarkupStringIf 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.