Toasts | Cuba - Premium Admin Template By Pixelstrap

Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Toasts

##### Message Toasts

Use`fixed` class to `[top/end/start/bottom]` toasts.

Success: We've updated your info
Software drivers needed to be updated in advance
A database connection error has occurred

    <div class="card-body common-flex common-toasts">
     <button class="btn btn-success" id="liveToastBtn6" type="button">Success Toast</button>
     <div class="toast-container 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="common-space 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 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="common-space 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 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="common-space 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 `hide` class to hide toast and `show` class to visible toast and given directions.`[top-0/bottom-0/start-0/end-0]`

Yuri Theme5 min ago
Hello, I'm a web-designer.
Your time over after 5 minute.
Riho Theme10 min ago
Well done! You successfully read this important message.
Mofi Theme

###### Your account will be permanently deleted?

Do you intend to continue?

    <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 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">Yuri 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 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="flex justify-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 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">Riho Theme</strong><small class="d-sm-block hidden">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 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">Mofi 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 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 `hide` class to hide toast and `show` class to visible toast.

Your time over after 5 minute.

    <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="flex justify-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-*]` to change icons colors.

Yuri Themejust now
Hello, I'm a web-designer.
Roxo Theme2 sec ago
Hello, I'm a UX-designer.
Zeta Theme6 min ago
Hello, I'm a Software developer.
Voxo Theme3 sec ago
Hello, I'm a professional web-designer.

     <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">Yuri 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`hide` class to hide toast and `show` class to visible toast and given directions.`[toast-*]` to change icons colors.

Edmin Theme11 mins ago
Hello, I'm a web-designer.
Koho Theme1 sec ago
Hello, I'm a full-stack developer.
Fastkart Themejust now
Hello, I'm a UX-designer.
Oslo Theme44 min ago
Hello, I'm a penetration-tester.

     <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">Edmin Theme</strong>
           <small class="text-muted d-sm-block hidden">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 hidden">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 hidden">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 hidden">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`hide` class to hide toast and `show` class to visible toast.

Oliva Theme10 min ago
Well done! You successfully read this important message.

     <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">Oliva Theme</strong><small class="d-sm-block hidden">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 `hide` class to hide toast and `show` class to visible toast.

Poco Theme

###### Your account will be permanently deleted?

Do you intend to continue?

     <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">Poco 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 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 `hide` class to hide toast and `show` class to visible toast and`form-select` to select any positions.

Zono 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">Zono Theme</strong>
             <small class="d-sm-block hidden">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>