b5toast

b5toast is javascript function to create and show bootstrap 5 toasts.

Requirements

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>

Demo

Demo

Usage

Minimal

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

With optional title

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

With optional delay

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);