Bootstrap 5 Toasts

Welcome to The Coding College! In this tutorial, we’ll explore Bootstrap 5 Toasts, a lightweight and flexible way to show notifications or messages to users in your application.

Toasts are non-blocking notifications designed to display brief messages without interrupting user interactions. They are commonly used for success messages, warnings, or other system notifications.

Features of Bootstrap 5 Toasts

  • Customizable Appearance: Modify layout, styles, and content to fit your needs.
  • Non-Intrusive Notifications: Toasts appear and disappear without blocking users.
  • Auto-Hide Option: Set automatic dismissal for toasts.
  • Highly Flexible: Add headers, body text, icons, and more.

Getting Started with Bootstrap 5 Toasts

1. Include Bootstrap

Before using toasts, ensure you’ve included Bootstrap 5’s CSS and JavaScript files. Use the Bootstrap CDN for a quick setup:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 Toast Example</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Basic Toast Example

Here’s how to create a simple toast:

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Bootstrap Toast</strong>
      <small class="text-muted">Just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, this is a toast message!
    </div>
  </div>
</div>

Breaking Down the Code

  1. toast-container: Ensures proper positioning for the toast notifications.
  2. toast: The main container for the toast notification.
  3. toast-header: Contains the header of the toast, including the title and a close button.
  4. toast-body: Displays the main content of the toast.
  5. data-bs-dismiss="toast": Enables the close button functionality.

Activating Toasts

To make a toast visible, initialize it using Bootstrap’s JavaScript:

document.addEventListener('DOMContentLoaded', function () {
  var toastElement = document.querySelector('.toast');
  var toast = new bootstrap.Toast(toastElement);
  toast.show();
});

This code will display the toast on page load.

Positioning Toasts

Toasts can be positioned anywhere on the screen. Bootstrap uses utility classes to handle positioning.

Example: Bottom-Right Corner

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

Other Positions

  • Top-Right: top-0 end-0
  • Bottom-Left: bottom-0 start-0
  • Center: top-50 start-50 translate-middle

Customizing Toasts

1. Auto-Hide

Enable or disable the auto-hide feature by passing options in JavaScript:

var toast = new bootstrap.Toast(document.querySelector('.toast'), {
  autohide: true,
  delay: 5000 // 5 seconds
});
toast.show();

2. Adding Colors

Add Bootstrap contextual classes to the toast-header or toast-body for styling:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header bg-success text-white">
    <strong class="me-auto">Success</strong>
    <small class="text-white">Just now</small>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Operation completed successfully!
  </div>
</div>

3. Toast Triggers

You can show or hide toasts dynamically based on user actions. For example:

<button class="btn btn-primary" id="showToast">Show Toast</button>
<div class="toast" id="myToast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Dynamic Toast</strong>
    <small>2 seconds ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    This toast was triggered dynamically!
  </div>
</div>

JavaScript:

document.querySelector('#showToast').addEventListener('click', function () {
  var toastElement = document.querySelector('#myToast');
  var toast = new bootstrap.Toast(toastElement);
  toast.show();
});

4. Stacking Toasts

To display multiple toasts at once, simply add more toast elements inside a toast-container:

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">First Toast</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      This is the first toast message.
    </div>
  </div>

  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Second Toast</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      This is the second toast message.
    </div>
  </div>
</div>

Accessibility Features

Bootstrap toasts are designed with accessibility in mind:

  1. ARIA Roles: Use aria-live and aria-atomic attributes to inform screen readers.
  2. Keyboard Navigation: Toasts can be dismissed using the Esc key.

Example:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <!-- Toast content -->
</div>

FAQs About Bootstrap 5 Toasts

1. Can I disable auto-hide?

Yes, set autohide: false in the JavaScript configuration:

var toast = new bootstrap.Toast(document.querySelector('.toast'), {
  autohide: false
});

2. How do I manually hide a toast?

Use the hide method in JavaScript:

var toast = bootstrap.Toast.getInstance(document.querySelector('.toast'));
toast.hide();

3. Can I use toasts with AJAX?

Absolutely! Toasts can be triggered after an AJAX response is received. Just ensure the toast element is in your DOM.

Conclusion

Bootstrap 5 Toasts are a versatile and elegant solution for showing brief, non-intrusive notifications. Whether you need to display success messages, warnings, or real-time updates, toasts provide a user-friendly way to enhance your web application.

Leave a Comment