A simple, lightweight JavaScript library for showing Bootstrap 5 toast popups.

  • By Nawaf Khalifah
  • Last update: Jul 13, 2022
  • Comments: 4

Toaststrap v1.1.0


Toaststrap is a simple, lightweight JavaScript library for showing Bootstrap 5 toast popups.


NPM version NPM downloads NPM downloads
GitHub Sponsors donate button GitHub Sponsors donate button


I created this library for everyone who uses Bootstrap 5 and wants to show some beautiful notifications for his users.


  • Pure JavaScript without jQuery.
  • 🇸🇦 RTL support.
  • Support hooks.
  • Easy to initialize and use.
  • 🔉 Support sound.
  • 🌈 Quick and efficient.
  • 🎨 Customizable.
  • 🆙 up-to-date.


Check the Documentation to get you started!


Have fun with Toaststrap's Initializer!


Show your ❤️ and support by giving a . Any suggestions are welcome!


Bugs and feature requests

Found a bug or have a feature request? Please open a new issue


Licensed under MIT




  • 1

    Wrong CSS Classes on element

    NPM Package does not provide correct classes.

    position-fixed toastsrap-bottom toastsrap-end-5 toastsrap-container show

    There is a type in all of them "toastsrap" > "toaststrap"

  • 2

    SCSS/CSS missing in npm package

    First of all -> Thank you for your effort. I was thinking of exaclty the same problem and you already solved it for me. Nice.

    But using it without having the css to display anything is not possible. The package does not contain the "dist" folder. You should consider setting up the package.json to include the dist folder in released.

    I guess you will be fast in resolving this issue without any PR needed.

  • 3

    Fix documentation & initializer typos

    Pauseable isn't an option. Pausable is the available one.

    • [X] Fix the option in the documentation
    • [X] Fix pausable? option in the initializer
    • [X] Fix initializer type? options' color
  • 4

    Show in Viewport

    How can i make the toast message show in the area the person is currently viewing please.

    i.e if the page is multiple pages long, and they are in the middle, they will not notice them at the very top or bottom.