Custom Bootstrap 5 Toast Generator In JavaScript – bs5-toast

Preview:

Description:

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