Add this html to the bottom(or anywhere) on the page. Only id is required. Classes can be changed according to your taste.
<div class="position-fixed bottom-0 start-0 p-3" id="toast-container"></div>
<script defer src="/b5toast.js"></script>
b5toast.success('my message'); //show toast success
b5toast.error('my message'); //show toast danger
b5toast.show('warning', 'my message'); //show toast with warning/any bootstrap color
b5toast.success('my message', 'optional title'); //show toast success
b5toast.error('my message', 'optional title'); //show toast danger
b5toast.show('warning', 'my message', 'optional title'); //show toast with warning/any bootstrap color
Default delay is 7s, can be changed in b5toast.js file
const optionalDelay = 1000;
b5toast.success('my message', 'optional title', optionalDelay);
b5toast.error('my message', 'optional title', optionalDelay);
b5toast.show('warning', 'my message', 'optional title', optionalDelay);
Source code: github.com/AucT/b5toast