# Bootstrap 5 Toaster

Bootstrap 5 toasts are great, but they require a lot of html to be included in the page. Most of the time, you want to generate toast notification from your javascript code. And there is no built-in solution for that.

Recently, I tried [BS5 toast](https://bs5-toast.vercel.app/) and it works almost exactly like what I needed.

Maybe some downsides:
- It uses a weird "bs5" namespace
- You cannot center notifications
- I'm not a big fan of how the stacks are implemented (I'd rather use the `toast-container` class if possible and let the browser deal with spacing).

But these are minor issues. Until I tried [bootstrap.native](https://github.com/thednp/bootstrap.native). Indeed, since bs5.toast use two dismiss icons in its code, it's not working properly with bootstrap.native that doesn't delegate events like the original bootstrap 5 library.

So I thought I could basically fix my minor issues and also deal with how the html code is generated. The end result is a simpler function that is used to generate toasts and it's available below.

%[https://codepen.io/lekoalabe/pen/wvPygrg]

**UPDATE:** This is now part of my [bs companion library](https://bs-companion.vercel.app/toaster.html)