Just another JavaScript library for creating Bootstrap 5 toast messages with custom content and smooth animations.
How to use it:
1. Load the minified version of the bs5-toast.js library in your Bootstrap 5 page.
<!-- Bootstrap 5 --> <link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/bootstrap.bundle.min.js"></script> <!-- bs5-toast library --> <script src="bs5-toast.js"></script>
2. Show a basic toast message on the page.
new bs5.Toast({
body: 'Toast Message Here',
}).show();
3. Add a custom header to the toast message.
new bs5.Toast({
body: 'Toast Message Here',
header: `<h6 class="mb-0">Hello, world!</h6><small class="ms-auto">just now</small>`,
}).show();
4. Set the placement of the toast message.
- top-right (Default)
- top-left
- bottom-right
- bottom-left
new bs5.Toast({
body: 'Toast Message Here',
placement: 'top-left',
}).show();
5. Determine whether to auto dismiss the toast message after a timeout (Default: auto dismiss after 5 seconds).
new bs5.Toast({
body: 'Toast Message Here',
autohide: true,
delay: 5000,
}).show();
6. Determine whether to apply a smooth transition effect to the toast message. Default: true.
new bs5.Toast({
body: 'Toast Message Here',
animation: true,
}).show();
7. Set the space between toast messages. Default: 16(px).
new bs5.Toast({
body: 'Toast Message Here',
gap: 20,
}).show();
8. Set the margin of the toast messages. Default: ‘1rem’.
new bs5.Toast({
body: 'Toast Message Here',
margin: '1.25rem',
}).show();
9. Determine whether to show a close icon inside the toast message. Default: true.
new bs5.Toast({
body: 'Toast Message Here',
btnClose: true,
btnCloseWhite: false, // white close button
}).show();
10. Apply additional CSS classes to the toast message.
new bs5.Toast({
body: 'Toast Message Here',
className: 'border-0 bg-primary text-white',
}).show();
The post Custom Bootstrap 5 Toast Generator In JavaScript – bs5-toast appeared first on CSS Script.