Bootstrap - Toasts

This chapter discusses about the component toasts. Toasts are like alert messages, that are lightweight and customizable. Toasts are a useful tool for providing responsive and unobtrusive notifications to the user.

Toasts in Bootstrap are used to display non-blocking notifications at the bottom or top of the screen.
They can provide feedback or alert the user to certain events or actions, without interrupting their current task.
Toasts can contain text, images, or any other HTML content, and can be customized to fit the design of the website or application.
They can also be dismissed by the user or have a set duration before disappearing on their own.
You must initialize the toasts yourself, as they are opt-in for performance reasons.
If you do not specify autohide: false, toasts will automatically hide.
The animation effect of the toast component is dependent on the prefers-reduced-motion media query.
A header and a body is recommended to be added to a toast to make it more extensible and predictable.
You require a single element to contain your toast and must have a dismiss button.

Basic toast

In order to create a basic toast, you need to use the .toast class and add a .toast-header to provide a heading and a .toast-body to add the content.

Let us see an example of a basic toast:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h3>Toast Example</h3>
      <p>A toast is like an alert box that is shown.</p>
      <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <small>A toast without an event</small>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
          Toast is shown without any event like on a click of a button.
        </div>
      </div>
    </div>
  </body>
</html>

In the past, the .hide class was added automatically to completely hide a toast with display:none instead of using opacity:0. Now, this is no longer needed.

The following JavaScript query is used to trigger a toast:

    const toastTrigger = document.getElementById('liveToastBtn')
    const toastLiveExample = document.getElementById('liveToast')

    if (toastTrigger) {
      const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
      toastTrigger.addEventListener('click', () => {
        toastBootstrap.show()
      })
    }

    $(document).ready(function() {
			$('#liveToast').click(function() {
				$('.toast').toast({
					animation: false,
					delay: 3000
				});
				$('.toast').toast('show');
			});
		});

Add the following link in your html:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Live toast

Following is an example of a live toast that can be viewed on your page:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Toasts</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class="container mx-auto mt-2">
	<h4>View Live toast</h4>
	<button type="button" class="btn btn-success" id="liveToast">View toast live</button>
    <div class="toast-container position-fixed bottom-0 end-0 p-4">
        <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
        <strong class="me-auto">Live Toast</strong>
        <small>Now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            This is a live toast and placed at the bottom of the page.
        </div>
        </div>
    </div>
	<script>
		$(document).ready(function() {
			$('#liveToast').click(function() {
				$('.toast').toast({
					animation: false,
					delay: 3000
				});
				$('.toast').toast('show');
			});
		});
	</script>
</body>
</html>

Translucent toast

Toasts are somewhat translucent and blend with the page on which they appear.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Toasts</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class=" container mx-auto mt-2">
	<h4>Translucent toast</h4>
	<button type="button" class="btn btn-success" id="viewToast">Click for toast</button>
    <div class="toast-container position-top top-0">
        <div id="viewToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
        <strong class="me-auto">Translucent Toast</strong>
        <small class="text-body-secondary">First toast</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            This is a translucent toast and placed at the top of the page.
        </div>
        </div>
    </div>
	<script>
		$(document).ready(function() {
			$('#viewToast').click(function() {
				$('.toast').toast({
					animation: false,
					delay: 3000
				});
				$('.toast').toast('show');
			});
		});
	</script>
</body>
</html>

Stacking of toasts

Toasts can be stacked in a toast container by wrapping them. Vertical space is added to the toasts when stacked.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Toasts</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class=" container mx-auto mt-2">
	<h4>Stacking of toasts</h4>
	<button type="button" class="btn btn-success" id="viewToast">View stacked toasts</button>
    <!-- First Toast -->
    <div class="toast-container position-top top-0">
        <div id="viewToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
        <strong class="me-auto">Toast 1</strong>
        <small class="text-body-secondary">First toast</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body text-bg-warning">
            This is toast 1 and is placed at the top of the page.
        </div>
        </div>
        <!-- Second Toast -->
        <div id="viewToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
          <strong class="me-auto">Toast 2</strong>
          <small class="text-body-secondary">Second toast</small>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body text-bg-info">
              This is toast 2 and is placed below toast 1.
          </div>
          </div>
    </div>
	<script>
		$(document).ready(function() {
			$('#viewToast').click(function() {
				$('.toast').toast({
					animation: false,
					delay: 3000
				});
				$('.toast').toast('show');
			});
		});
	</script>
</body>
</html>

Custom content

The toasts can be customized by removing the sub-components, adding some utilities or even for that matter, your own markup.
You can add a custom icon from Bootstrap icons or remove the .toast-header, add buttons to the content, etc.

Let us see an example for the customization of a toast, where two buttons are added to the toast body:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Toasts</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class=" container mx-auto mt-2">
	<h4>Customization of toasts</h4>
	<!-- Button to trigger the toasts -->
    <button type="button" class="btn btn-primary" id="myBtn">View customized toast</button>
    <div class="toast-container">
      <div class="toast">
        <div class="toast-header bg-secondary-subtle">
          <strong>Thanks</strong>
        </div>
        <div class="toast-body text-bg-secondary">Buttons are added to the toast.</div>
        <button type="button" class="btn btn-success btn-sm">Submit</button>
        <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="toast" aria-label="Close">Cancel</button>
      </div>
    </div>
    <script>
      $(document).ready(function() {
        $('#myBtn').click(function() {
          $('.toast').toast({
            animation: false,
            delay: 3000
          });
          $('.toast').toast('show');
        });
      });
    </script>
</body>
</html>

Color schemes

Different toast color schemes can be created using the colors and background utilities.

Let us see an example of adding the color scheme to a toast:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Toasts</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class=" container mx-auto mt-2">
	<h4>Color scheme</h4>
    <p>Color scheme added to the toast</p>
	<!-- Button to trigger the toasts -->
    <button type="button" class="btn btn-primary" id="myBtn">Click for toast</button>
    <div class="toast-container">
      <div class="toast">
        <div class="toast-header bg-warning-subtle">
          <strong>Toast Header</strong>
        </div>
        <div class="toast-body text-bg-success">Color scheme is added to the header and body of the toast.</div>
    </div>
    </div>
    <script>
      $(document).ready(function() {
        $('#myBtn').click(function() {
          $('.toast').toast({
            animation: false,
            delay: 3000
          });
          $('.toast').toast('show');
        });
      });
    </script>
</body>
</html>

Placement of toasts

The toast placement feature is used to set the position of the toast on the webpage. Following are the options available for placement of toasts:

.position-absolute - It is used to position the element relative to its closest positioned ancestor.
.top-* - sets the position of the top alignment of the toast.
.bottom-* - sets the position of the bottom alignment of the toast.
.start-* - sets the position of the start alignment of the toast.
.end-* - sets the position of the end alignment of the toast.

The values taken by the placement classes range from 0 to 50.

Let us see an example of the placement classes:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Toasts</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class=" container mx-auto mt-2">
	<h4>Placement - Toasts</h4>
    <p>Set the position of the toasts on webpage</p>
	<!-- Button to trigger the toasts -->
    <button type="button" class="btn btn-primary" id="myBtn">Click for toast</button>
     <!--Top left -->
    <div class="toast-container top-0 start-0">
        <div class="toast">
            <div class="toast-header">
              <strong class="me-auto">Toast 1</strong>
              <small class="text-body-secondary">Toast top left </small>
              <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                Position at Top left.
            </div>
        </div>
    </div>
     <!--Top center-->
    <div class="toast-container top-0 start-50 translate-middle-x">
        <div class="toast">
            <div class="toast-header">
              <strong class="me-auto">Toast 2</strong>
              <small class="text-body-secondary">Toast at top center</small>
              <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                Position at Top Center.
            </div>
        </div>
    </div>
     <!--Top right -->
    <div class="toast-container top-0 end-0"> 
        <div class="toast">
            <div class="toast-header">
              <strong class="me-auto">Toast 3</strong>
              <small class="text-body-secondary">Toast at top right</small>
              <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                Position at Top Right.
            </div>
        </div>
    </div>
    <!--Middle left-->
    <div class="toast-container top-50 start-0 translate-middle-y"> 
      <div class="toast">
          <div class="toast-header">
            <strong class="me-auto">Toast 4</strong>
            <small class="text-body-secondary">Toast at middle left</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
              Position at middle left.
          </div>
      </div>
    </div>
    <!--Middle left-->
    <div class="toast-container top-50 start-50 translate-middle"> 
      <div class="toast">
          <div class="toast-header">
            <strong class="me-auto">Toast 5</strong>
            <small class="text-body-secondary">Toast at middle center</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
              Position at middle center.
          </div>
      </div>
    </div>
    <!--Middle right-->
    <div class="toast-container top-50 end-0 translate-middle-y"> 
      <div class="toast">
          <div class="toast-header">
            <strong class="me-auto">Toast 6</strong>
            <small class="text-body-secondary">Toast at middle right</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
              Position at middle right.
          </div>
      </div>
    </div>
    <!--Bottom left-->
    <div class="toast-container bottom-0 start-0"> 
      <div class="toast">
          <div class="toast-header">
            <strong class="me-auto">Toast 7</strong>
            <small class="text-body-secondary">Toast at bottom left</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
              Position at bottom left.
          </div>
      </div>
    </div>
    <!--Bottom center-->
    <div class="toast-container bottom-0 start-50 translate-middle-x"> 
      <div class="toast">
          <div class="toast-header">
            <strong class="me-auto">Toast 8</strong>
            <small class="text-body-secondary">Toast at bottom center</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
              Position at bottom center.
          </div>
      </div>
    </div>
    <!--Bottom right-->
    <div class="toast-container bottom-0 end-0"> 
      <div class="toast">
          <div class="toast-header">
            <strong class="me-auto">Toast 9</strong>
            <small class="text-body-secondary">Toast at bottom right</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
              Position at bottom right.
          </div>
      </div>
    </div>
    <script>
      $(document).ready(function() {
        $('#myBtn').click(function() {
          $('.toast').toast({
            animation: false,
            delay: 3000
          });
          $('.toast').toast('show');
        });
      });
    </script>
</body>
</html>

When working with systems that generate many notifications, one after the other, you can use a wrapping element to stack these notifications. Refer the example given below:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Toasts</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-toasts p-0">
    <div aria-live="polite" aria-atomic="true" class="position-relative">

      <div class="toast-container top-0 start-0 p-3">
    
        <!-- Toasts within the container -->
        <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <strong class="me-auto">Toast 1</strong>
            <small class="text-body-secondary">Toast on top</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
            Toast at the top of the container.
          </div>
        </div>
    
        <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <strong class="me-auto">Toast 2</strong>
            <small class="text-body-secondary">Second toast</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
            Second toast in the stack.
          </div>
        </div>

        <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <strong class="me-auto">Toast 3</strong>
            <small class="text-body-secondary">Third toast</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
            Another toast in the stack.
          </div>
        </div>

        <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <strong class="me-auto">Toast 4</strong>
            <small class="text-body-secondary">Last toast</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
            Fourth toast at the bottom of the stack.
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

In order to align toasts horizontally and/or vertically, use the flexbox utilties. Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Toasts</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-toasts d-flex">
    <!-- Adding a flexbox container for alignment of the toasts -->
    <div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
    
      <!-- Then put toasts within the flexbox container-->
      <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header bg-danger-subtle">
          <strong class="me-auto">Toast within flexbox</strong>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
          This is a toast that is placed within a flexbox container and justified center.
        </div>
      </div>
    </div>
  </body>
</html>

Accessibility

In order to make the toasts accessible to the users with screen readers and / or similar assistive technologies, you should wrap the toasts in an aria-live region.

Changes to the live regions are automatically identified by the screen readers, without setting the user's focus.
Ensure that the complete toast is identified as a single (atomic) unit, by including aria-atomic="true".
When the information shown to the user is important, use the alert components rather than toasts.
The live region should be present in the markup before the toast is generated or updated.
Depending on the content, you need to adapt the role and aria-live attributes; such as:
- In case of error, use:
  role="alert" aria-live="assertive"
- Otherwise, use:
  role="status" aria-live="polite"
You must update the delay timeout in order to let the user read the toast, as the content being displayed changes dynamically.
A close button must be added to the toast, to allow users to close the toast, when using autohide: false.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Toasts</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class=" container mx-auto mt-2">
	<h4>Accessibility - Toasts</h4>
    <p>Make the toasts accessible according to the value of role and aria-live</p>
	<!-- Button to trigger the toasts -->
    <button type="button" class="btn btn-primary" id="myBtn">Click for toast</button>
    <div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
        <div class="toast">
            <div class="toast-header">
              <strong class="me-auto">Toast 1</strong>
              <small class="text-body-secondary">First toast</small>
              <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                A toast that is like an alert.
            </div>
        </div>
    </div>
    <div role="status" aria-live="polite" aria-atomic="true" class="toast" data-bs-autohide="false">
      <div class="toast">
          <div class="toast-header">
            <strong class="me-auto">Toast 2</strong>
            <small class="text-body-secondary">Second toast</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
              Toast where role=status and aria-live=polite.
          </div>
      </div>
  </div>
    <script>
      $(document).ready(function() {
        $('#myBtn').click(function() {
          $('.toast').toast({
            animation: false,
            delay: 3000
          });
          $('.toast').toast('show');
        });
      });
    </script>
</body>
</html>