Bootstrap - Toasts

Creating a Basic Toast

To create a basic Toast in Bootstrap, you need to use the right HTML structure and include the needed classes and attributes.

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

Let's break down the classes and attributes used in this structure:

Inside the Toast, there are two main sections:

1. The toast-header section contains the title of the Toast and an optional close button.

   • The <strong> element with the class me-auto shows the title of the Toast.
   • The close button has the class btn-close and the data-bs-dismiss="toast" attribute, which lets users dismiss the Toast when clicked.

2. The toast-body section holds the main content of the Toast.

   • You can add any HTML elements or text within this section to show your message.

To change the content of the Toast, you can modify the text within the <strong> element in the header and add your own message within the toast-body section.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Success!</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Your action has been completed successfully.
  </div>
</div>

By changing the content within the toast-header and toast-body sections, you can make the Toast show any message you want.

Remember to include the needed Bootstrap CSS and JavaScript files in your project for the Toast to work properly.

With this basic structure, you can now create Toasts in your Bootstrap projects and change their content to fit your needs.

Toast Placement

Bootstrap gives a set of predefined placement classes to put Toasts in different positions without having to write custom CSS.

To use these placement classes, add them to the outermost <div> element of the Toast.

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

The Toast will appear in the top-right corner of the page.

If you need more control over the placement of the Toast, you can use custom CSS. Wrap the Toast within a container <div> and apply your own positioning styles to the container.

<div class="toast-container" style="position: absolute; top: 20px; right: 20px;">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <!-- Toast content goes here -->
  </div>
</div>

The toast-container is positioned absolutely, 20 pixels from the top and right edges of the page. You can change these values or use other CSS properties like bottom and left to position the container as needed.

When using custom placement, make sure to consider the size and visibility of the Toast on different screen sizes and devices. Test your placement thoroughly to provide a good user experience.

Triggering Toasts

You can trigger Toasts in Bootstrap in different ways, such as showing them when a button is clicked, triggering them using JavaScript, and hiding them automatically or manually.

To show a Toast on button click, you can use the data-bs-toggle and data-bs-target attributes on the button element. The data-bs-toggle attribute should be set to "toast", and the data-bs-target attribute should point to the ID of the Toast you want to trigger.

<button type="button" class="btn btn-primary" data-bs-toggle="toast" data-bs-target="#myToast">
  Show Toast
</button>

<div class="toast" id="myToast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Button Triggered</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    This Toast was triggered by clicking the button.
  </div>
</div>

You can also trigger Toasts using JavaScript. Use the Toast constructor to create a new Toast instance and call the show() method to display it.

var myToast = document.getElementById('myToast')
var toast = new bootstrap.Toast(myToast)
toast.show()

By default, Toasts will hide automatically after a certain duration. You can set this duration using the data-bs-delay attribute on the Toast element. The value should be in milliseconds.

<div class="toast" data-bs-delay="3000">
  <!-- Toast content goes here -->
</div>

If you want to prevent the Toast from hiding automatically, you can set the data-bs-autohide attribute to "false".

<div class="toast" data-bs-autohide="false">
  <!-- Toast content goes here -->
</div>

To hide a Toast manually, you can call the hide() method on the Toast instance using JavaScript.

var myToast = document.getElementById('myToast')
var toast = new bootstrap.Toast(myToast)
toast.hide()

By using these methods, you can control when and how Toasts are triggered and hidden in your Bootstrap projects, providing a smooth and interactive user experience.

Customizing Toast Appearance

Bootstrap Toasts have a default appearance, but you can modify their colors, background, and add icons or images to match your application's design.

To change the background color of a Toast, use the bg-* classes provided by Bootstrap, where * is the color name. For example, to give a Toast a success color background, add the bg-success class to the Toast container.

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

You can also use other background color classes like bg-danger, bg-warning, bg-info, or bg-primary to apply different colors to the Toast.

If you want more control over the colors, use custom CSS to set the background color and text color of the Toast.

<div class="toast" style="background-color: #e6f2ff; color: #004085;" role="alert" aria-live="assertive" aria-atomic="true">
  <!-- Toast content goes here -->
</div>

To add icons or images to the Toast, include them within the toast-header or toast-body sections using the appropriate HTML elements.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="path/to/your/icon.png" class="rounded me-2" alt="Icon">
    <strong class="me-auto">Toast with Icon</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    <img src="path/to/your/image.jpg" alt="Toast Image" class="img-fluid mb-2">
    This Toast includes an icon in the header and an image in the body.
  </div>
</div>

You can style the Toast header and body separately by applying custom CSS classes or inline styles to the toast-header and toast-body elements.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header" style="background-color: #f8f9fa; border-bottom: 1px solid #dee2e6;">
    <strong class="me-auto">Styled Header</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body" style="font-size: 1.2rem; padding: 1.5rem;">
    This Toast has a styled header and body.
  </div>
</div>

The toast-header has a light gray background color and a bottom border, while the toast-body has a larger font size and increased padding.

By using these customization techniques, you can modify the appearance of Toasts to fit your application's design and make them visually appealing to your users.

Toast Options

Bootstrap Toasts have several options that let you set their behavior and appearance. Here's how to set the duration of a Toast, enable or disable the auto-hide feature, and show or hide the close button.

To set the duration for which a Toast stays visible, use the data-bs-delay attribute on the Toast element. The value should be in milliseconds.

<div class="toast" data-bs-delay="5000" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Toast with Custom Duration</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    This Toast will automatically hide after 5 seconds.
  </div>
</div>

The Toast will stay visible for 5000 milliseconds (5 seconds) before automatically hiding.

By default, Toasts have the auto-hide feature enabled, which means they will automatically disappear after the set duration. You can disable this feature by setting the data-bs-autohide attribute to "false".

<div class="toast" data-bs-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Toast with Auto-hide Disabled</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    This Toast will not automatically hide and requires manual dismissal.
  </div>
</div>

When data-bs-autohide is set to "false", the Toast will stay visible until manually dismissed by the user or programmatically hidden using JavaScript.

The close button on a Toast lets users manually dismiss the Toast. By default, the close button is displayed. You can choose to hide it by removing the button element from the Toast's HTML structure.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Toast without Close Button</strong>
  </div>
  <div class="toast-body">
    This Toast does not have a close button and requires programmatic hiding.
  </div>
</div>

To hide the Toast programmatically when the close button is not present, you can use JavaScript to call the hide() method on the Toast instance.

var myToast = document.getElementById('myToast');
var toast = new bootstrap.Toast(myToast);
toast.hide();

This code gets the Toast element by its ID, creates a new Toast instance, and then calls the hide() method to dismiss the Toast.

By setting these Toast options, you can control the duration, auto-hide behavior, and the presence of the close button to fit your application's needs and provide a tailored user experience.

Stacking Multiple Toasts

To show multiple Toasts on a page, you can stack them vertically using a Toast container. Here's how to create a Toast container, stack Toasts, and control the maximum number of visible Toasts.

To stack Toasts, create a container element and give it the class toast-container. This container will hold all the Toasts that you want to display.

<div class="toast-container position-fixed top-0 end-0 p-3">
  <!-- Toasts will be added here -->
</div>

The position-fixed class positions the container fixed on the page, while the top-0, end-0, and p-3 classes position it at the top-right corner with some padding.

Next, add your Toasts inside the container. Each Toast should have the toast class and the required attributes.

<div class="toast-container position-fixed top-0 end-0 p-3">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Toast 1</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 in the stack.
    </div>
  </div>
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Toast 2</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 in the stack.
    </div>
  </div>
</div>

The Toasts will stack vertically within the container, with the newest Toast appearing at the bottom.

You can control the maximum number of visible Toasts by adding or removing Toast elements from the container dynamically using JavaScript.

var toastContainer = document.querySelector('.toast-container');
var maxToasts = 3;

function addToast(message) {
  if (toastContainer.children.length >= maxToasts) {
    toastContainer.removeChild(toastContainer.firstElementChild);
  }

  var toast = document.createElement('div');
  toast.classList.add('toast');
  toast.setAttribute('role', 'alert');
  toast.setAttribute('aria-live', 'assertive');
  toast.setAttribute('aria-atomic', 'true');
  toast.innerHTML = `
    <div class="toast-header">
      <strong class="me-auto">New Toast</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      ${message}
    </div>
  `;

  toastContainer.appendChild(toast);
  new bootstrap.Toast(toast).show();
}

This JavaScript code does the following:

1. It selects the Toast container using the querySelector method.
2. It sets a maximum limit of visible Toasts using the maxToasts variable.
3. The addToast function takes a message as a parameter and creates a new Toast element.
4. If the number of Toasts in the container exceeds the maxToasts limit, it removes the oldest Toast using removeChild.
5. It adds the new Toast to the container using appendChild and shows it using the show method.