bootstrap
  1. bootstrap-toasts
PreviousNext

Bootstrap Toasts

Bootstrap Toasts are lightweight containers that show a message to the user for a short period of time. They are often used to display notifications or alerts without interrupting the user experience.

Syntax

Here is the basic syntax for creating a Bootstrap Toast:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="mr-auto">Title</strong>
    <small>Time</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Message
  </div>
</div>

To show the Toast, you need to use JavaScript:

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

Example

Here is an example of how to create a simple Bootstrap Toast.

<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
        Hello, world! This is a toast message.
    </div>
</div>
Try Playground

Explanation

In the code above, we used the following classes and attributes to create the Toast:

  • toast: this is the main class that indicates that this is a Toast.
  • toast-header: this class contains the header of the Toast, including the title, time, and close button.
  • toast-body: this class contains the message content of the Toast.
  • data-autohide="false": this attribute tells Bootstrap to keep the Toast visible until the user manually closes it.
  • data-dismiss="toast": this attribute is used in the close button to dismiss the Toast.

Use

Toasts can be customized to fit your website's design and can be used for various purposes such as notifications, alerts, and messages.

Important Points

  • Toasts are lightweight containers that show a message to the user for a short period of time.
  • Toasts can be closed manually or automatically after a certain time.
  • Toasts can be customized to fit your website's design and can be used for various purposes such as notifications, alerts, and messages.

Summary

Bootstrap Toasts are a useful component for displaying short messages to users. They are easy to use and can be customized to fit your website's design. Whether you need to display notifications, alerts, or messages, Toasts are a great way to do so without interrupting the user experience.

CollapseSpacing Utilities
Published on: