Chat List

Show All

  • A
  • B
  • D
  • J
  • O
Chat with Khelesh

Online

Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Notications

Show All

  • SEVER STATUS
  • KK
  • SOCIAL
  • RU
  • SEVER STATUS
  • AU
  • MO
Notes

Add New Nots

Live Toast

                     
 
<button type="button" class="btn btn-primary me-2 mb-2 liveToastBtn">Top Left Toast</button>
<div class="toast-container position-fixed top-0 start-0 p-3">
 <div class="toast livetoast" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-header">
     <strong class="me-auto">Bootstrap</strong>
     <small class="text-body-secondary">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>
<button type="button" class="btn btn-primary me-2 mb-2 liveToastBtn">Top Right Toast</button>
<div class="toast-container position-fixed top-0 end-0 p-3">
 <div class="toast livetoast" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-header">
     <strong class="me-auto">Bootstrap</strong>
     <small class="text-body-secondary">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>
<button type="button" class="btn btn-primary me-2 mb-2 liveToastBtn">Bottom Left Toast</button>
<div class="toast-container position-fixed bottom-0 start-0 p-3">
 <div class="toast livetoast" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-header">
     <strong class="me-auto">Bootstrap</strong>
     <small class="text-body-secondary">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>
<button type="button" class="btn btn-primary me-2 mb-2 liveToastBtn">Bottm Right Toast</button>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
 <div class="toast livetoast" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-header">
     <strong class="me-auto">Bootstrap</strong>
     <small class="text-body-secondary">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>


                   

Toast Basic example

                     
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
 <div class="toast-header">
   <?xml version="1.0" encoding="UTF-8"?>
   <svg class="me-2" width="15px" height="15px" version="1.1" viewBox="-1 0 30 30"
                       xmlns="http://www.w3.org/2000/svg">
   <g fill="none" fill-rule="evenodd">
   <g transform="translate(-362 -880)" fill="var(--primary)">
   <path d="m365 904 3-6v-8c0-4.418 3.582-8 8-8s8 3.582 8 8v8l3 6h-22zm11 4c-1.305 0-2.403-0.837-2.816-2h5.632c-0.413 1.163-1.511 2-2.816 2zm10-10v-8c0-5.522-4.478-10-10-10s-10 4.478-10 10v8l-4 8h9.101c0.463 2.282 2.48 4 4.899 4s4.436-1.718 4.899-4h9.101l-4-8z"></path>
   </g>
   </g>
   </svg>
 <strong class="me-auto">Bootstrap</strong>
 <small class="text-body-secondary">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>

                     
                   

Stacking Toasts

                     
<div class="toast-container position-static">
 <div class="toast show mb-3" role="alert" aria-live="assertive" aria-atomic="true">
 <div class="toast-header">
   <?xml version="1.0" encoding="UTF-8"?>
   <svg class="me-2" width="15px" height="15px" version="1.1" viewBox="-1 0 30 30"
                       xmlns="http://www.w3.org/2000/svg">
   <g fill="none" fill-rule="evenodd">
   <g transform="translate(-362 -880)" fill="var(--primary)">
   <path d="m365 904 3-6v-8c0-4.418 3.582-8 8-8s8 3.582 8 8v8l3 6h-22zm11 4c-1.305 0-2.403-0.837-2.816-2h5.632c-0.413 1.163-1.511 2-2.816 2zm10-10v-8c0-5.522-4.478-10-10-10s-10 4.478-10 10v8l-4 8h9.101c0.463 2.282 2.48 4 4.899 4s4.436-1.718 4.899-4h9.101l-4-8z"></path>
   </g>
   </g>
   </svg>
   <strong class="me-auto">Bootstrap</strong>
   <small class="text-body-secondary">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="toast show mb-3" role="alert" aria-live="assertive" aria-atomic="true">
 <div class="toast-header">
   <?xml version="1.0" encoding="UTF-8"?>
   <svg class="me-2" width="15px" height="15px" version="1.1" viewBox="-1 0 30 30"
                       xmlns="http://www.w3.org/2000/svg">
   <g fill="none" fill-rule="evenodd">
   <g transform="translate(-362 -880)" fill="var(--secondary)">
   <path d="m365 904 3-6v-8c0-4.418 3.582-8 8-8s8 3.582 8 8v8l3 6h-22zm11 4c-1.305 0-2.403-0.837-2.816-2h5.632c-0.413 1.163-1.511 2-2.816 2zm10-10v-8c0-5.522-4.478-10-10-10s-10 4.478-10 10v8l-4 8h9.101c0.463 2.282 2.48 4 4.899 4s4.436-1.718 4.899-4h9.101l-4-8z"></path>
   </g>
   </g>
   </svg>
   <strong class="me-auto">Bootstrap</strong>
   <small class="text-body-secondary">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 class="toast show mb-3" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-header">
   <?xml version="1.0" encoding="UTF-8"?>
   <svg class="me-2" width="15px" height="15px" version="1.1" viewBox="-1 0 30 30"
                       xmlns="http://www.w3.org/2000/svg">
   <g fill="none" fill-rule="evenodd">
   <g transform="translate(-362 -880)" fill="#2BC155">
   <path d="m365 904 3-6v-8c0-4.418 3.582-8 8-8s8 3.582 8 8v8l3 6h-22zm11 4c-1.305 0-2.403-0.837-2.816-2h5.632c-0.413 1.163-1.511 2-2.816 2zm10-10v-8c0-5.522-4.478-10-10-10s-10 4.478-10 10v8l-4 8h9.101c0.463 2.282 2.48 4 4.899 4s4.436-1.718 4.899-4h9.101l-4-8z"></path>
   </g>
   </g>
   </svg>
   <strong class="me-auto">Bootstrap</strong>
   <small class="text-body-secondary">5 minutes ago</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="toast show mb-3" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-header">
   <?xml version="1.0" encoding="UTF-8"?>
   <svg class="me-2" width="15px" height="15px" version="1.1" viewBox="-1 0 30 30"
                       xmlns="http://www.w3.org/2000/svg">
   <g fill="none" fill-rule="evenodd">
   <g transform="translate(-362 -880)" fill="#FF2E2E">
   <path d="m365 904 3-6v-8c0-4.418 3.582-8 8-8s8 3.582 8 8v8l3 6h-22zm11 4c-1.305 0-2.403-0.837-2.816-2h5.632c-0.413 1.163-1.511 2-2.816 2zm10-10v-8c0-5.522-4.478-10-10-10s-10 4.478-10 10v8l-4 8h9.101c0.463 2.282 2.48 4 4.899 4s4.436-1.718 4.899-4h9.101l-4-8z"></path>
   </g>
   </g>
   </svg>
   <strong class="me-auto">Bootstrap</strong>
   <small class="text-body-secondary">8 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>

                     
                   

Toast Color Scheme

                     
<div class="toast-container position-static">
 <div class="toast show align-items-center mb-3" 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 p-3" data-bs-dismiss="toast" aria-label="Close"></button>
   </div>
 </div>
 <div class="toast show align-items-center text-white bg-primary border-0 mb-3" 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 btn-close-white me-2 m-auto p-3" data-bs-dismiss="toast" aria-label="Close"></button>
   </div>
 </div>
 <div class="toast show align-items-center text-white bg-secondary border-0 mb-3" 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 btn-close-white me-2 m-auto p-3" data-bs-dismiss="toast" aria-label="Close"></button>
   </div>
 </div>
 <div class="toast show align-items-center text-white bg-success border-0 mb-3" 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 btn-close-white me-2 m-auto p-3" data-bs-dismiss="toast" aria-label="Close"></button>
   </div>
 </div>
 <div class="toast show align-items-center text-white bg-danger border-0 mb-3" 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 btn-close-white me-2 m-auto p-3" data-bs-dismiss="toast" aria-label="Close"></button>
   </div>
 </div>
 <div class="toast show align-items-center text-white bg-info border-0 mb-3" 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 btn-close-white me-2 m-auto p-3" data-bs-dismiss="toast" aria-label="Close"></button>
   </div>
 </div>
 <div class="toast show align-items-center text-white bg-warning border-0 mb-3" 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 btn-close-white me-2 m-auto p-3" data-bs-dismiss="toast" aria-label="Close"></button>
   </div>
 </div>
</div>

                   

button Toasts

                     
<div class="toast-container position-static">
 <div class="toast show mb-3" role="alert" aria-live="assertive" aria-atomic="true">
 <div class="toast-header">
   <?xml version="1.0" encoding="UTF-8"?>
   <svg class="me-2" width="15px" height="15px" version="1.1" viewBox="-1 0 30 30"
                       xmlns="http://www.w3.org/2000/svg">
   <g fill="none" fill-rule="evenodd">
   <g transform="translate(-362 -880)" fill="var(--primary)">
   <path d="m365 904 3-6v-8c0-4.418 3.582-8 8-8s8 3.582 8 8v8l3 6h-22zm11 4c-1.305 0-2.403-0.837-2.816-2h5.632c-0.413 1.163-1.511 2-2.816 2zm10-10v-8c0-5.522-4.478-10-10-10s-10 4.478-10 10v8l-4 8h9.101c0.463 2.282 2.48 4 4.899 4s4.436-1.718 4.899-4h9.101l-4-8z"></path>
   </g>
   </g>
   </svg>
   <strong class="me-auto">Bootstrap</strong>
   <small class="text-body-secondary">just now</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 class="mt-2 pt-2 border-top">
     <button type="button" class="btn btn-primary btn-sm">Take action</button>
     <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
     </div>
   </div>
 </div>

 <div class="toast show mb-3" role="alert" aria-live="assertive" aria-atomic="true">
 <div class="toast-header">
   <?xml version="1.0" encoding="UTF-8"?>
   <svg class="me-2" width="15px" height="15px" version="1.1" viewBox="-1 0 30 30"
                       xmlns="http://www.w3.org/2000/svg">
   <g fill="none" fill-rule="evenodd">
   <g transform="translate(-362 -880)" fill="#2BC155">
   <path d="m365 904 3-6v-8c0-4.418 3.582-8 8-8s8 3.582 8 8v8l3 6h-22zm11 4c-1.305 0-2.403-0.837-2.816-2h5.632c-0.413 1.163-1.511 2-2.816 2zm10-10v-8c0-5.522-4.478-10-10-10s-10 4.478-10 10v8l-4 8h9.101c0.463 2.282 2.48 4 4.899 4s4.436-1.718 4.899-4h9.101l-4-8z"></path>
   </g>
   </g>
   </svg>
   <strong class="me-auto">Bootstrap</strong>
   <small class="text-body-secondary">2 seconds 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 class="mt-2 pt-2 border-top">
     <button type="button" class="btn btn-success btn-sm">Take action</button>
     <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
     </div>
   </div>
 </div>
 
 <div class="toast show mb-3" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-header">
   <?xml version="1.0" encoding="UTF-8"?>
   <svg class="me-2" width="15px" height="15px" version="1.1" viewBox="-1 0 30 30"
                       xmlns="http://www.w3.org/2000/svg">
   <g fill="none" fill-rule="evenodd">
   <g transform="translate(-362 -880)" fill="#FF2E2E">
   <path d="m365 904 3-6v-8c0-4.418 3.582-8 8-8s8 3.582 8 8v8l3 6h-22zm11 4c-1.305 0-2.403-0.837-2.816-2h5.632c-0.413 1.163-1.511 2-2.816 2zm10-10v-8c0-5.522-4.478-10-10-10s-10 4.478-10 10v8l-4 8h9.101c0.463 2.282 2.48 4 4.899 4s4.436-1.718 4.899-4h9.101l-4-8z"></path>
   </g>
   </g>
   </svg>
   <strong class="me-auto">Bootstrap</strong>
   <small class="text-body-secondary">5 minutes 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 class="mt-2 pt-2 border-top">
     <button type="button" class="btn btn-danger btn-sm">Take action</button>
     <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
     </div>
   </div>
 </div>
</div>

                     
                   

Solid Background Toast

                     
 <div class="toast-container position-static custom-toast">
   <div class="toast overflow-hidden show" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header bg-primary text-white">
       <strong class="me-auto">Bootstrap</strong>
       <small>11 mins ago</small>
       <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
     <div class="toast-body">
       Hello, world! This is a toast message.
     </div>
   </div>
   <div class="toast overflow-hidden show" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header bg-secondary text-white">
       <strong class="me-auto">Bootstrap</strong>
       <small>11 mins ago</small>
       <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
     <div class="toast-body">
       Hello, world! This is a toast message.
     </div>
   </div>
   <div class="toast overflow-hidden show" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header bg-success text-white">
       <strong class="me-auto">Bootstrap</strong>
       <small>11 mins ago</small>
       <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
     <div class="toast-body">
       Hello, world! This is a toast message.
     </div>
   </div>
   <div class="toast overflow-hidden show" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header bg-danger text-white">
       <strong class="me-auto">Bootstrap</strong>
       <small>11 mins ago</small>
       <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
     <div class="toast-body">
       Hello, world! This is a toast message.
     </div>
   </div>
 </div>