bootstrap 5 toast display

Bootstrap 5 Toast Display

To display a toast using Bootstrap 5, you can follow these steps:

  1. 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>
  1. 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>
  1. 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.