Bootstrap 4 JS Toasts

Welcome to The Coding College! In this article, we’ll explore the Bootstrap 4 JS Toasts component. Toasts are lightweight notifications that are perfect for providing feedback to users in a non-intrusive way.

Toasts are highly customizable, responsive, and easy to implement in your projects, making them a great choice for interactive websites.

What Are Toasts in Bootstrap 4?

Toasts are popup-like messages that display information to the user. They’re similar to alerts but are more flexible and suitable for temporary, contextual notifications. They can appear anywhere on the screen, are dismissible, and can be triggered manually or automatically.

1. Basic Toast Example

Here’s a basic example of a toast component in Bootstrap 4.

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 4 Toasts</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container mt-5">
    <!-- Toast -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
      <div class="toast-header">
        <strong class="mr-auto">Notification</strong>
        <small class="text-muted">Just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="toast-body">
        This is a simple toast notification!
      </div>
    </div>

    <!-- Button to trigger toast -->
    <button class="btn btn-primary mt-3" id="showToast">Show Toast</button>
  </div>

  <!-- jQuery, Popper.js, and Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  <script>
    $(document).ready(function () {
      $('#showToast').click(function () {
        $('.toast').toast('show');
      });
    });
  </script>
</body>
</html>

2. Understanding the Code

  1. Toast Markup:
    • The toast class creates the toast container.
    • The toast-header holds the title and close button.
    • The toast-body contains the main content of the toast.
  2. Attributes:
    • data-autohide="false": Disables automatic hiding of the toast. Set to true for auto-dismiss behavior.
    • aria-live and aria-atomic: Ensure accessibility for screen readers.
  3. Triggering the Toast:
    • Use the .toast('show') method to display the toast dynamically.

3. Customizing Toasts

Toasts can be easily customized using classes and JavaScript.

Example: Add Background Colors

<div class="toast bg-success text-white" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="mr-auto">Success</strong>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">×</span>
    </button>
  </div>
  <div class="toast-body">
    Your operation was successful!
  </div>
</div>

Example: Change Auto-Hide Duration

Use the delay option to set how long the toast stays visible.

$('.toast').toast({
  delay: 3000, // Toast will disappear after 3 seconds
});
$('.toast').toast('show');

Positioning the Toast

You can position the toast anywhere on the page using CSS.

<div class="toast" style="position: absolute; top: 20px; right: 20px;">
  <!-- Toast Content -->
</div>

4. Using Toasts with Events

Bootstrap 4 toasts support events that allow you to hook into their lifecycle.

EventDescription
show.bs.toastFires before the toast is shown.
shown.bs.toastFires after the toast is shown.
hide.bs.toastFires before the toast is hidden.
hidden.bs.toastFires after the toast is hidden.

Example:

$('.toast').on('shown.bs.toast', function () {
  console.log('Toast is fully visible!');
});

5. Multiple Toasts

You can have multiple toasts on the same page, each with its unique trigger.

<div id="toast1" class="toast">...</div>
<div id="toast2" class="toast">...</div>

<button onclick="$('#toast1').toast('show')">Show Toast 1</button>
<button onclick="$('#toast2').toast('show')">Show Toast 2</button>

6. Best Practices

  1. Purpose: Use toasts for brief notifications, not for critical or long-form messages.
  2. Accessibility: Ensure proper ARIA attributes are added for screen readers.
  3. Auto-Dismiss: Use delay for automatic dismissals unless user action is required.

Conclusion

Bootstrap 4 Toasts are an excellent way to provide feedback or display quick notifications to your users. They’re easy to implement, customizable, and fit seamlessly into any Bootstrap project.

Leave a Comment