BootstrapHow-ToBeginner · 3 min read

How to Create Toast in Bootstrap: Simple Guide

To create a toast in Bootstrap, use a div with the class toast and include a header and body inside. Initialize it with JavaScript using new bootstrap.Toast(element).show() to display the toast on the page.

📐

Syntax

A Bootstrap toast requires a container div with the class toast. Inside, you typically add a toast-header for the title and close button, and a toast-body for the message. Use JavaScript to show or hide the toast.

toast: main container for the toast message
toast-header: optional header with title and close button
toast-body: main content of the toast
JavaScript: controls showing and hiding the toast

html

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Title</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Your message here.
  </div>
</div>

Output

A small popup box with a header 'Title' and a close button, plus a message area.

💻

Example

This example shows a complete Bootstrap toast that appears when the page loads. It includes a header with a title and close button, and a body with a message. The toast is positioned at the bottom right corner.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Toast Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    .toast-container {
      position: fixed;
      bottom: 1rem;
      right: 1rem;
      z-index: 1080;
    }
  </style>
</head>
<body>
  <div class="toast-container">
    <div id="myToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <strong class="me-auto">Notification</strong>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Hello! This is a Bootstrap toast message.
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    const toastElement = document.getElementById('myToast');
    const toast = new bootstrap.Toast(toastElement);
    toast.show();
  </script>
</body>
</html>

Output

A small popup toast appears at the bottom right with the header 'Notification' and the message 'Hello! This is a Bootstrap toast message.' It includes a close button.

⚠️

Common Pitfalls

Common mistakes when creating Bootstrap toasts include:

Not including the Bootstrap JavaScript bundle, so the toast won't show.
Missing the toast class on the container div.
Forgetting to call toast.show() in JavaScript to display the toast.
Not setting proper ARIA roles and attributes for accessibility.
Placing the toast outside a visible container or without positioning, so it may not appear on screen.

html

<!-- Wrong: Missing toast class and JS -->
<div id="toastWrong">
  <div>Message</div>
</div>

<!-- Right: Proper toast with JS -->
<div id="toastRight" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">Message</div>
</div>
<script>
  const t = new bootstrap.Toast(document.getElementById('toastRight'));
  t.show();
</script>

Output

Only the right toast with correct classes and JS will appear as a popup message.

📊

Quick Reference

Part	Description
toast	Main container with class 'toast'
toast-header	Optional header with title and close button
toast-body	Content area for the message
JavaScript	Use 'new bootstrap.Toast(element).show()' to display
ARIA attributes	Use role='alert', aria-live='assertive', aria-atomic='true' for accessibility

✅

Key Takeaways

Always add the 'toast' class to the container div for Bootstrap styling.

Use JavaScript 'new bootstrap.Toast(element).show()' to display the toast.

Include ARIA roles and attributes for accessibility compliance.

Position the toast container so the toast is visible on the page.

Include Bootstrap's JavaScript bundle for toast functionality.