logologo-dark

Bootstrap Toast

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message. It's built with flexbox, so they’re easy to align and position.

Basic Examples

Toasts are lightweight notifications designed to mimic the push notifications.

Code Example
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><strong class="me-auto text-primary">Bootstrap</strong><small>11 mins ago</small><button type="button" class="close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="toast-body">Hello, world! This is a toast message.</div></div>
Code Example
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><strong class="me-auto text-primary">Bootstrap</strong><small class="text-muted">11 mins ago</small><button type="button" class="close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="toast-body">Hello, world! This is a toast message.</div></div>
Code Example
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><strong class="me-auto text-primary">Bootstrap</strong><small class="text-muted">just now</small><button type="button" class="close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="toast-body">See? Just like this.</div></div><div class="toast" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><strong class="me-auto text-primary">Bootstrap</strong><small class="text-muted">2 seconds ago</small><button type="button" class="close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="toast-body">Heads up, toasts will stack automatically</div></div>
Bootstrap11 mins ago
Hello, world! This is a toast message.
Code Example
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">  <div class="toast-container position-absolute top-0 end-0 p-3">    <div class="toast show">      <div class="toast-header">        <strong class="me-auto text-primary">Bootstrap</strong>        <small>11 mins ago</small>        <button type="button" class="close" data-dismiss="toast" aria-label="Close">          <em class="icon ni ni-cross-sm"></em>        </button>      </div>      <div class="toast-body">        Hello, world! This is a toast message.      </div>    </div>  </div> </div>
Code Example
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">    <!-- Position it -->    <div class="toast-container position-absolute top-0 end-0 p-3">        <!-- Then put toasts within -->        <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">          <div class="toast-header">            <strong class="me-auto text-primary">Bootstrap</strong>            <small class="text-muted">just now</small>            <button type="button" class="close" data-dismiss="toast" aria-label="Close">              <em class="icon ni ni-cross-sm"></em>            </button>          </div>          <div class="toast-body">            See? Just like this.          </div>        </div>        <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">          <div class="toast-header">            <strong class="me-auto text-primary">Bootstrap</strong>            <small class="text-muted">2 seconds ago</small>            <button type="button" class="close" data-dismiss="toast" aria-label="Close">              <em class="icon ni ni-cross-sm"></em>            </button>          </div>          <div class="toast-body">            Heads up, toasts will stack automatically          </div>        </div>    </div>  </div>
Code Example
<!-- Flexbox container for aligning the toasts --><div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;"><!-- Then put toasts within --><div class="toast" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><strong class="me-auto text-primary">Bootstrap</strong><small>11 mins ago</small><button type="button" class="close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="toast-body">Hello, world! This is a toast message.</div></div></div>
Code Example
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false"><div class="toast-header"><strong class="me-auto text-primary">Bootstrap</strong><small>11 mins ago</small><button type="button" class="close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="toast-body">Hello, world! This is a toast message.</div></div>
Switch Demo Layout
Use Case Concept
Preview Settings
Direction Change
LTR Mode
RTL Mode
Main UI Style
Default
Clean
Shady
Softy
Sidebar Style
White
Light
Dark
Theme
Header Style
White
Light
Dark
Theme
Primary Skin
Default
Blue
Egyptian
Purple
Green
Red
Skin Mode
Light Skin
Dark Skin
Looking for functional script for Investment Platform? Check out
Investorm
Looking for Advanced
Investment Platform?