Toasts

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
Read the official Bootstrap Documentation for a full list of instructions and other options.

Example

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.

Basic

Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button. 

<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <i class="ri-home-4-fill me-2"></i>
    <div class="me-auto fw-medium">Bootstrap</div>
    <small class="text-muted">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>

Translucent

Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the backdrop-filter CSS property, we’ll also attempt to blur the elements under a toast. 

<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <i class="ri-home-4-fill me-2"></i>
    <div class="me-auto fw-medium">Bootstrap</div>
    <small class="text-muted">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>

Custom content

Customize your toasts by removing sub-components, tweaking with utilities, or adding your own markup. Here we’ve created a simpler toast by removing the default .toast-header

<div class="toast fade show bs-toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Stacking

When you have multiple toasts, we default to vertically stacking them in a readable manner.

<div class="toast-container position-relative">
  <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <i class="ri-home-4-fill me-2"></i>
      <div class="me-auto fw-medium">Bootstrap</div>
      <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">
      See? Just like this.
    </div>
  </div>

  <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <i class="ri-home-4-fill me-2"></i>
      <div class="me-auto fw-medium">Bootstrap</div>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Animation

Use animate.css to use animation in Bootstrap Toasts.

Usage

In order to use animate.css on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header: 

<link rel="stylesheet" href="assets/vendor/libs/animate-css/animate.css" />
<div class="bs-toast toast fade show animate__animated animate__flipInX" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="d-block w-px-20 h-auto rounded me-2" alt="" />
    <div class="me-auto fw-medium">Bootstrap</div>
    <small class="text-muted">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>

Placement

Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top center. If you’re only ever going to show one toast at a time, put the positioning classes right on the .toast. 

<div class="bs-toast toast fade show position-absolute top-0 end-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="d-block w-px-20 h-auto rounded me-2" alt="" />
    <div class="me-auto fw-medium">Bootstrap</div>
    <small class="text-muted">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>

Styles

Several predefined toasts styles, each serving its own semantic purpose, with a few extras thrown in for more control. 

<div class="toast-container position-relative">
  <!-- Default Toast -->
  <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <i class="ri-home-4-fill me-2"></i>
      <div class="me-auto fw-medium">Bootstrap</div>
      <small class="text-muted">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>

  <!-- Primary Toast -->
  <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <i class="ri-bootstrap-fill text-primary me-2"></i>
      <div class="me-auto fw-medium">Bootstrap</div>
      <small class="text-muted">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>

  <!-- Secondary Toast -->
  <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <i class="ri-spam-fill text-secondary me-2"></i>
      <div class="me-auto fw-medium">Bootstrap</div>
      <small class="text-muted">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>

  <!-- Success Toast -->
  <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <i class="ri-checkbox-circle-fill text-success me-2"></i>
      <div class="me-auto fw-medium">Bootstrap</div>
      <small class="text-muted">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>

  <!-- Danger Toast -->
  <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <i class="ri-error-warning-fill text-danger me-2"></i>
      <div class="me-auto fw-medium">Bootstrap</div>
      <small class="text-muted">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>

  <!-- Warning Toast -->
  <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <i class="ri-alert-fill text-warning me-2"></i>
      <div class="me-auto fw-medium">Bootstrap</div>
      <small class="text-muted">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>

  <!-- Info Toast -->
  <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <i class="ri-information-fill text-info me-2"></i>
      <div class="me-auto fw-medium">Bootstrap</div>
      <small class="text-muted">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>

  <!-- Dark Toast -->
  <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <i class="ri-contrast-fill text-dark me-2"></i>
      <div class="me-auto fw-medium">Bootstrap</div>
      <small class="text-muted">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>
</div>
Class Value
class="text-{value}" primary | secondary | success | danger | warning | info | light | dark

Toastr

Toastr is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended.

Usage

In order to use Toastr on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header: 

<link rel="stylesheet" href="assets/vendor/libs/toastr/toastr.css" />

Include the following vendors script in the "Vendors JS" area from the page's footer: 

<link rel="stylesheet" href="assets/vendor/libs/toastr/toastr.js" />
Show Toast Clear Toasts Clear Last Toast
© 2017- Pixinvent, Hand-crafted & Made with ❤️