How to create a toaster with Bootstrap library?

Question

0

2 Answers

Write Your Answer

Answer 1

You can create toast notifications in Bootstrap using the built-in Toast component. Bootstrap provides styles and JavaScript behavior for showing temporary popup messages such as success alerts, warnings, or errors.

Bootstrap documentation: Bootstrap Toasts Documentation

Here’s a complete example using Bootstrap 5.

1. Include Bootstrap

<!-- Bootstrap CSS -->
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>

<!-- Bootstrap JS -->
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>

2. Add Toast HTML

<!-- Toast Container -->
<div class="toast-container position-fixed top-0 end-0 p-3">

  <!-- Toast -->
  <div id="liveToast" class="toast" role="alert">

    <!-- Toast Header -->
    <div class="toast-header">

      <!-- Small colored icon -->
      <div class="bg-success rounded me-2" 
           style="width:20px;height:20px;">
      </div>

      <!-- Title -->
      <strong class="me-auto">Notification</strong>

      <!-- Time -->
      <small>Just now</small>

      <!-- Close Button -->
      <button type="button"
              class="btn-close"
              data-bs-dismiss="toast">
      </button>
    </div>

    <!-- Toast Body -->
    <div class="toast-body">
      Data saved successfully!
    </div>

  </div>
</div>

3. Add a Button to Trigger Toast

<button id="toastBtn" class="btn btn-primary">
  Show Toast
</button>

4. Initialize Toast with JavaScript

<script>

  // Wait until page loads
  document.addEventListener("DOMContentLoaded", function () {

    // Get toast element
    const toastElement = document.getElementById("liveToast");

    // Create Bootstrap toast instance
    const toast = new bootstrap.Toast(toastElement);

    // Button click event
    document.getElementById("toastBtn")
      .addEventListener("click", function () {

        // Show toast
        toast.show();
      });
  });

</script>

Complete Working Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Bootstrap Toast Example</title>

  <!-- Bootstrap CSS -->
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
    rel="stylesheet"
  />
</head>

<body class="p-5">

  <!-- Button -->
  <button id="toastBtn" class="btn btn-primary">
    Show Toast
  </button>

  <!-- Toast Container -->
  <div class="toast-container position-fixed top-0 end-0 p-3">

    <!-- Toast -->
    <div id="liveToast"
         class="toast"
         role="alert">

      <div class="toast-header">

        <strong class="me-auto">Success</strong>

        <small>Now</small>

        <button type="button"
                class="btn-close"
                data-bs-dismiss="toast">
        </button>

      </div>

      <div class="toast-body">
        Your action completed successfully.
      </div>

    </div>
  </div>

  <!-- Bootstrap JS -->
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
  </script>

  <script>

    // Wait for DOM ready
    document.addEventListener("DOMContentLoaded", function () {

      // Select toast element
      const toastElement = document.getElementById("liveToast");

      // Initialize toast
      const toast = new bootstrap.Toast(toastElement);

      // Button click
      document.getElementById("toastBtn")
        .addEventListener("click", function () {

          // Show toast
          toast.show();
        });
    });

  </script>

</body>
</html>

Optional Toast Settings

You can customize behavior:

const toast = new bootstrap.Toast(toastElement, {

  // Auto hide
  autohide: true,

  // Delay before hiding (milliseconds)
  delay: 3000
});

Common Toast Positions

Position	Classes
Top Right	`top-0 end-0`
Top Left	`top-0 start-0`
Bottom Right	`bottom-0 end-0`
Bottom Center	`bottom-0 start-50 translate-middle-x`

Example:

<div class="toast-container position-fixed bottom-0 end-0 p-3">

Different Toast Types

Success

<div class="toast text-bg-success">

Danger/Error

<div class="toast text-bg-danger">

Warning

<div class="toast text-bg-warning">

Info

<div class="toast text-bg-info">

Answer 2

Toasts are a notification bar designed to display notifications on mobile and desktop operating systems, built with Flexbox so they are easy to align and position.

<!DOCTYPE html>

<html lang='en'>

<head>

    <title>Toast Example</title>

    <meta charset='utf-8'>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>

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

    <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js'></script>

    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>

</head>

<body>

    <div class='container my-2'>

        <h3 class='text-center'>Toast Example</h3>

        <div class='toast align-items-center text-white bg-primary border-0' role='alert' aria-live='assertive' aria-atomic='true' data-autohide='false'>

            <div class='d-flex'>

                <div class='toast-body'>

                    I am a toast message !!!!!

                </div>

                <button type='button' class='close ml-auto px-3 text-white' data-bs-dismiss='toast' aria-label='Close'>&times;</button>

            </div>

        </div>

        <div class='toast' data-autohide='false'>

            <div class='toast-header'>

                <img src='logo.png' class='rounded mr-3' alt='logo' style='width: 10%;' />

                <strong class='mr-auto text-primary'>I am Toast Header</strong>

                <small class='text-muted'>5 mins ago</small>

                <button type='button' class='px-2 close' data-dismiss='toast'>&times;</button>

            </div>

            <div class='toast-body'>

                I am the toast body, write any things in toast body.

            </div>

        </div>

    </div>

    <script>

        $(document).ready(function () {

            $('.toast').toast('show');

        });

    </script>

</body>

</html>

Output

How to create a toaster with Bootstrap library?