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">
    <img src="..." class="rounded me-2" alt="" />
    <div class="me-auto fw-medium">Bootstrap</div>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
  </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">
    <img src="..." class="rounded me-2" alt="" />
    <div class="me-auto fw-medium">Bootstrap</div>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
  </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">
      Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
    </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">
      <img src="..." class="rounded me-2" alt="" />
      <span class="fw-medium me-auto">Bootstrap</span>
      <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">
      <img src="..." class="rounded me-2" alt="" />
      <span class="fw-medium me-auto">Bootstrap</span>
      <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 PRO

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>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
  </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>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
  </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">
      <img src="assets/img/avatars/1.png" class="d-block w-px-20 h-auto rounded me-2" alt="" />
      <div class="me-auto fw-medium">Bootstrap</div>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
    </div>
  </div>

  <!-- Primary Toast -->
  <div class="bs-toast toast fade show bg-primary" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="assets/img/avatars/1.png" class="d-block w-px-20 h-auto rounded me-2" alt="" />
      <div class="me-auto fw-medium">Bootstrap</div>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
    </div>
  </div>

  <!-- Secondary Toast -->
  <div class="bs-toast toast fade show bg-secondary" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="assets/img/avatars/1.png" class="d-block w-px-20 h-auto rounded me-2" alt="" />
      <div class="me-auto fw-medium">Bootstrap</div>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
    </div>
  </div>

  <!-- Success Toast -->
  <div class="bs-toast toast fade show bg-success" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="assets/img/avatars/1.png" class="d-block w-px-20 h-auto rounded me-2" alt="" />
      <div class="me-auto fw-medium">Bootstrap</div>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
    </div>
  </div>

  <!-- Warning Toast -->
  <div class="bs-toast toast fade show bg-warning" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="assets/img/avatars/1.png" class="d-block w-px-20 h-auto rounded me-2" alt="" />
      <div class="me-auto fw-medium">Bootstrap</div>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
    </div>
  </div>

  <!-- Info Toast -->
  <div class="bs-toast toast fade show bg-info" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="assets/img/avatars/1.png" class="d-block w-px-20 h-auto rounded me-2" alt="" />
      <div class="me-auto fw-medium">Bootstrap</div>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
    </div>
  </div>

  <!-- Danger Toast -->
  <div class="bs-toast toast fade show bg-danger" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="assets/img/avatars/1.png" class="d-block w-px-20 h-auto rounded me-2" alt="" />
      <div class="me-auto fw-medium">Bootstrap</div>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
    </div>
  </div>

  <!-- Dark Toast -->
  <div class="bs-toast toast fade show bg-dark" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="assets/img/avatars/1.png" class="d-block w-px-20 h-auto rounded me-2" alt="" />
      <div class="me-auto fw-medium">Bootstrap</div>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
    </div>
  </div>
</div>
Class Value
class="bg-{value}" primary | secondary | success | danger | warning | info | light | dark

Toastr PRO

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- ThemeSelection, Hand-crafted & Made with ❤️