Bootstrap 4 Toast

Welcome to The Coding College! Toasts in Bootstrap 4 are lightweight, customizable notifications designed to provide feedback to users in a non-intrusive way. Toasts are perfect for displaying alerts, status updates, or contextual messages without disrupting the user’s experience.

In this guide, we’ll explore how to use Bootstrap 4 Toasts, from setup to customization.

What is a Bootstrap 4 Toast?

A Toast is a small notification box that slides into view and disappears after a set time. Toasts are typically used for short messages, such as success or error alerts, and can include additional HTML elements for interactivity.

Setting Up Toasts

Before using Toasts, ensure your project includes the Bootstrap 4 library and its dependencies.

Include Bootstrap and Dependencies

Add the following links to your HTML file:

<!-- Bootstrap CSS -->  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  

<!-- jQuery and Popper.js -->  
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>  

<!-- Bootstrap JavaScript -->  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Creating a Basic Toast

A basic toast consists of a container (.toast) and content (.toast-header and .toast-body). You also need to initialize the toast using JavaScript.

Example: Basic Toast

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Bootstrap 4 Toast</title>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  
</head>  
<body>  
  <div class="container mt-5">  
    <h2>Bootstrap 4 Toast Example</h2>  

    <!-- Toast -->  
    <div class="toast" data-autohide="true" style="position: absolute; top: 20px; right: 20px;">  
      <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">×</button>  
      </div>  
      <div class="toast-body">  
        This is a basic toast notification.  
      </div>  
    </div>  

    <!-- Trigger Button -->  
    <button type="button" class="btn btn-primary mt-3" onclick="$('.toast').toast('show');">  
      Show Toast  
    </button>  
  </div>  

  <script src="https://code.jquery.com/jquery-3.5.1.slim.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>  
</body>  
</html>

Toast Options

Bootstrap 4 Toasts are highly customizable with data attributes and JavaScript. Here are some common options:

OptionDescriptionDefault
animationEnables/disables toast fade animation.true
autohideAutomatically hides the toast.true
delayTime (in ms) before toast is hidden.5000

Example: Custom Delay

<div class="toast" data-delay="10000" style="position: absolute; top: 20px; right: 20px;">  
  <div class="toast-header">  
    <strong class="mr-auto">Long Toast</strong>  
    <small class="text-muted">10 seconds ago</small>  
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>  
  </div>  
  <div class="toast-body">  
    This toast stays visible for 10 seconds.  
  </div>  
</div>

Toast Placement

Toasts can be positioned anywhere on the screen. Use Bootstrap utility classes like position-absolute, top-0, right-0, and m-3 to control placement.

Example: Centered Toast

<div class="toast" data-autohide="false" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">  
  <div class="toast-header">  
    <strong class="mr-auto">Centered Toast</strong>  
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>  
  </div>  
  <div class="toast-body">  
    This toast is centered on the screen.  
  </div>  
</div>

Controlling Toasts with JavaScript

You can dynamically control toasts using JavaScript methods.

Show a Toast

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

Hide a Toast

$('.toast').toast('hide');

Toggle a Toast

$('.toast').toast('toggle');

Styling Toasts

You can customize the appearance of toasts by modifying their default Bootstrap classes. For example:

.toast-header {  
  background-color: #007bff;  
  color: white;  
}  

.toast-body {  
  font-size: 16px;  
}

Accessibility

Bootstrap 4 Toasts are accessible by default, but you can enhance them by adding ARIA attributes like aria-live and aria-atomic for screen readers.

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

Conclusion

Bootstrap 4 Toasts are a sleek, user-friendly way to display notifications or messages to your users. With support for rich content, flexible placement, and smooth animations, you can create engaging feedback mechanisms for your web applications.

Leave a Comment