bootstrap 5 toast display
Bootstrap 5 Toast Display
To display a toast using Bootstrap 5, you can follow these steps:
- Include the necessary Bootstrap CSS and JavaScript files in your HTML document. You can either download them and host them locally or use a CDN. Here's an example using the CDN:
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
- Create a container element where the toast will be displayed. This can be any HTML element, such as a
<div>
. Give it a unique ID to target it later. For example:
<div id="toastContainer"></div>
- Use JavaScript to create and display the toast. You can use the
Toast
class provided by Bootstrap to create the toast dynamically. Here's an example:
// Get the toast container element
const toastContainer = document.getElementById('toastContainer');
// Create a new toast
const toast = new bootstrap.Toast(toastContainer, {
autohide: true, // Set to false if you want the toast to stay visible until dismissed manually
delay: 3000, // The duration in milliseconds before the toast automatically hides
});
// Set the toast content
toastContainer.innerHTML = '<div class="toast-body">This is a toast message</div>';
// Show the toast
toast.show();
Replace 'This is a toast message'
with the content you want to display in the toast.
That's it! The toast will be displayed on the page according to the specified options.
Note: Make sure to include the Bootstrap CSS and JavaScript files before using the toast functionality.