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 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-containerclass if possible and let the browser deal with spacing).
But these are minor issues. Until I tried 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.
UPDATE: This is now part of my bs companion library