Use JavaScript To Dynamically Create Bootstrap 5 Toasts – b5toast.js

Preview:

Description:

b5toast.js is an ultra-light JavaScript library that enables developers to dynamically create Bootstrap 5 toasts without having to write any HTML.

How to use it:

1. Download and import the b5toast.js into your document.

<!-- Bootstrap is required -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
<!-- b5toast.js -->
<script src="/path/to/b5toast.js"></script>

2. Create a container to hold the Bootstrap 5 toasts.

<!-- Bottom Left -->
<div class="position-fixed bottom-0 start-0 p-3" id="toast-container"></div>

3. Create Bootstrap 5 toasts as follows:

b5toast.success('Success Message');
b5toast.error('Error Message');
b5toast.show('any BS color class here', 'Custom Toast Message');

4. Display toast titles.

b5toast.success('Success Message', 'Success Title');

5. Customize the duration for auto-dismiss.

b5toast.success('Success Message', 'Success Title', 2000);