Chat List

Show All

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

Online

  • View profile
  • Add to btn-close friends
  • Add to group
  • Block
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

Upgrade you Account to Pro

Upgrade

FinLab Crypto Admin © 2024 All Rights Reserved

Made with by DexignLab

  1. Bootstrap
  2. Toasts

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>

Copyright © Designed & Developed by DexignLab 2024