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 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. 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