Toasts

Message Toasts

Use the .position-fixed class through [top/end/start/bottom] toasts.

<div class="card-body common-flex common-toasts">
 <button class="btn btn-success" id="liveToastBtn6" type="button">Success Toast</button>
 <div class="toast-container position-fixed top-0 end-0 p-3 toast-index toast-rtl">
   <div class="toast" id="liveToast6" role="alert" aria-live="polite" aria-atomic="true">
     <div class="d-flex justify-content-between align-items-center alert-light-success">
       <div class="toast-body">
         <i class="close-search stroke-success" data-feather="check-square"></i>Success: We've updated your info
       </div>
       <button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
   </div>
 </div>
 <button class="btn btn-warning" id="liveToastBtn5" type="button">Warning Toast</button>
 <div class="toast-container position-fixed top-50 end-0 p-3 toast-index toast-rtl">
   <div class="toast" id="liveToast5" role="alert" aria-live="polite" aria-atomic="true">
     <div class="d-flex justify-content-between align-items-center alert-light-warning">
       <div class="toast-body">
         <i class="close-search stroke-warning" data-feather="alert-triangle"></i>Software drivers needed to be updated in advance
       </div>
       <button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
   </div>
 </div>
 <button class="btn btn-danger" id="liveToastBtn4" type="button">Error Toast</button>
 <div class="toast-container position-fixed bottom-0 end-0 p-3 toast-index toast-rtl">
   <div class="toast" id="liveToast4" role="alert" aria-live="polite" aria-atomic="true">
     <div class="d-flex justify-content-between align-items-center alert-light-danger">
       <div class="toast-body">
         <i class="close-search stroke-danger" data-feather="x-circle"></i>A database connection error has occurred
       </div>
       <button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
   </div>
 </div>
</div>

Live Toast

Use the .hide class through hide toast and .show class through visible toast and given directions.[top-0/bottom-0/start-0/end-0]

<div class="card-body position-relative common-flex">
 <button class="btn btn-primary" id="liveToastBtn" type="button">Top-right Toast</button>
 <div class="toast-container position-fixed top-0 end-0 p-3 toast-index toast-rtl">
   <div class="toast hide toast fade" id="liveToast" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header toast-img">
       <img class="rounded me-2" src="../assets/images/dashboard-5/profile.png" alt="profile">
       <strong class="me-auto">Cuba Theme</strong>
       <small>5 min ago</small>
       <button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
     <div class="toast-body toast-dark">Hello, I'm a web-designer.</div>
   </div>
 </div>
 <button class="btn btn-secondary" id="liveToastBtn1" type="button">Bottom-right Toast</button>
 <div class="toast-container position-fixed bottom-0 end-0 p-3 toast-index toast-rtl">
   <div class="toast hide toast fade" id="liveToast1" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="d-flex justify-content-between alert-secondary">
       <div class="toast-body">Your time over after 5 minute.</div>
       <button class="btn-close btn-close-white me-2 m-auto" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
   </div>
 </div>
 <button class="btn btn-warning" id="liveToastBtn2" type="button">Top-left Toast</button>
 <div class="toast-container position-fixed start-0 top-0 p-3 toast-index toast-rtl">
   <div class="toast hide toast fade" id="liveToast2" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header toast-img">
       <img class="rounded me-2" src="../assets/images/dashboard-5/profile.png" alt="profile">
       <strong class="me-auto">Cuba Theme</strong><small class="d-sm-block d-none">10 min ago</small>
       <button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
     <div class="toast-body toast-dark">
       <strong class="txt-success">Well done!</strong> You successfully read this important message.
     </div>
   </div>
 </div>
 <button class="btn btn-success" id="liveToastBtn3" type="button">Bottom-left Toast</button>
 <div class="toast-container position-fixed start-0 bottom-0 p-3 toast-index toast-rtl">
   <div class="toast hide toast fade" id="liveToast3" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header toast-img">
       <img class="rounded me-2" src="../assets/images/dashboard-5/profile.png" alt="profile">
       <strong class="me-auto">Cuba Theme</strong>
       <button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
     <div class="toast-body toast-dark">
       <h6 class="mb-2">Your account will be permanently deleted?</h6>
       <p class="mb-0">Do you intend to continue?</p>
       <div class="mt-2 pt-2 border-top d-flex gap-2">
         <button class="btn btn-dark btn-sm" type="button">I'm not sure</button>
         <button class="btn btn-danger btn-sm" type="button" data-bs-dismiss="toast">Remove My Account</button>
       </div>
     </div>
   </div>
 </div>
</div>

Colors Schemes

Use the .hide class through hide toast and .show class through visible toast.

<div class="card-body toast-rtl">
 <div class="toast default-show-toast align-items-center text-light bg-warning border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
   <div class="d-flex justify-content-between">
     <div class="toast-body">Your time over after 5 minute.</div>
     <button class="btn-close btn-close-white me-2 m-auto" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
   </div>
 </div>
</div>

Stacking Toasts

You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.[toast-*] through change icons colors.

 <div class="card-body toast-rtl">
 <div class="toast-container position-static">
   <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
     <div class="toast-header">
       <i class="toast-icons toast-primary" data-feather="bell"></i>
       <strong class="me-auto">Cuba Theme</strong>
       <small class="txt-danger">just now</small>
       <button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
     <div class="toast-body toast-dark">Hello, I'm a web-designer.</div>
   </div>
   <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
     <div class="toast-header">
       <i class="toast-icons toast-warning" data-feather="bell"></i>
       <strong class="me-auto">Roxo Theme</strong>
       <small class="text-muted">2 sec ago</small>
       <button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
     <div class="toast-body toast-dark">Hello, I'm a UX-designer.</div>
   </div>
   <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
     <div class="toast-header">
       <i class="toast-icons toast-danger" data-feather="bell"></i>
       <strong class="me-auto">Zeta Theme</strong>
       <small class="text-muted">6 min ago</small>
       <button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
     <div class="toast-body toast-dark">Hello, I'm a Software developer.</div>
   </div>
   <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
     <div class="toast-header">
       <i class="toast-icons toast-success" data-feather="bell"></i>
       <strong class="me-auto">Voxo Theme</strong>
       <small class="text-muted">3 sec ago</small>
       <button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
     <div class="toast-body toast-dark">Hello, I'm a professional web-designer.</div>
   </div>
 </div>
</div>

Translucent Toasts

Use the .hide class through hide toast and .show class through visible toast and given directions.[toast-*] through change icons colors.

 <div class="card-body toast-rtl bg-dark">
 <div class="toast-container">
   <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="80000">
     <div class="toast-header">
       <i class="toast-icons toast-info" data-feather="disc"></i>
       <strong class="me-auto">Cuba Theme</strong>
       <small class="text-muted d-sm-block d-none">11 mins ago</small>
       <button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
     <div class="toast-body toast-dark"> Hello, I'm a web-designer.</div>
   </div>
   <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="80000">
     <div class="toast-header">
       <i class="toast-icons toast-dark" data-feather="disc"></i>
       <strong class="me-auto">Koho Theme</strong>
       <small class="text-muted d-sm-block d-none">1 sec ago</small>
       <button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
     <div class="toast-body toast-dark"> Hello, I'm a full-stack developer.</div>
   </div>
   <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="80000">
     <div class="toast-header">
       <i class="toast-icons toast-secondary" data-feather="disc"></i>
       <strong class="me-auto">Fastkart Theme</strong>
       <small class="txt-danger d-sm-block d-none">just now</small>
       <button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
     <div class="toast-body toast-dark"> Hello, I'm a UX-designer.</div>
   </div>
   <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="80000">
     <div class="toast-header">
       <i class="toast-icons toast-success" data-feather="disc"></i>
       <strong class="me-auto">Oslo Theme</strong>
       <small class="text-muted d-sm-block d-none">44 min ago</small>
       <button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
     <div class="toast-body toast-dark"> Hello, I'm a penetration-tester.</div>
   </div>
 </div>
</div>

Default Toast

Use the .hide class through hide toast and .show class through visible toast.

 <div class="card-body toast-rtl">
 <div class="toast default-show-toast toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
   <div class="toast-header toast-img">
     <img class="rounded me-2" src="../assets/images/dashboard-5/profile.png" alt="profile">
     <strong class="me-auto">Cuba Theme</strong><small class="d-sm-block d-none">10 min ago</small>
     <button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
   </div>
   <div class="toast-body toast-dark">
     <strong class="txt-success">Well done!</strong> You successfully read this important message.
   </div>
 </div>
</div>

Unique Toast

Use the .hide class through hide toast and .show class through visible toast.

 <div class="card-body toast-rtl">
 <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
   <div class="toast-header toast-img">
     <img class="rounded me-2" src="../assets/images/dashboard-5/profile.png" alt="profile">
     <strong class="me-auto">Cuba Theme</strong>
     <button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
   </div>
   <div class="toast-body toast-dark">
     <h6 class="mb-2">Your account will be permanently deleted?</h6>
     <p class="mb-0">Do you intend to continue?</p>
     <div class="mt-2 pt-2 border-top d-flex gap-2">
       <button class="btn btn-dark btn-sm" type="button">I'm not sure</button>
       <button class="btn btn-danger btn-sm" type="button" data-bs-dismiss="toast">Remove My Account</button>
     </div>
   </div>
 </div>
</div>

Toast Placement

Use the .hide class through hide toast and .show class through visible toast..form-select through select any positions.

profileMofi Theme25 min ago

Attackers on malicious activity may trick you into doing something dangerous like installing software or revealing your personal information's.

 <div class="card-body toast-rtl toast-dark">
 <form>
   <div class="mb-3">
     <select class="form-select mt-2" id="selectToastPlacement">
       <option value="" selected>Select a position...</option>
       <option value="top-0 start-0">Top left</option>
       <option value="top-0 start-50 translate-middle-x">Top center</option>
       <option value="top-0 end-0">Top right</option>
       <option value="top-50 start-0 translate-middle-y">Middle left</option>
       <option value="top-50 start-50 translate-middle">Middle center</option>
       <option value="top-50 end-0 translate-middle-y">Middle right</option>
       <option value="bottom-0 start-0">Bottom left</option>
       <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
       <option value="bottom-0 end-0">Bottom right</option>
     </select>
   </div>
 </form>
 <div class="bg-light position-relative bd-example-toasts" aria-live="polite" aria-atomic="true" data-bs-autohide="true">
   <div class="toast-container p-3 position-absolute" id="toastPlacement">
     <div class="toast toast-fade show">
       <div class="toast-header toast-img">
         <img class="rounded me-2" src="../assets/images/dashboard-5/profile.png" alt="profile">
         <strong class="me-auto">Cuba Theme</strong>
         <small class="d-sm-block d-none">25 min ago</small>
       </div>
       <div class="toast-body toast-dark txt-dark">
         <p class="toast-content">
           <em class="txt-danger">Attackers</em>on malicious activity may trick you into doing something dangerous like installing software or revealing your personal information's.
         </p>
       </div>
     </div>
   </div>
 </div>
</div>