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

Live Documentation Help & getting started
Dark Mode
Toasts

Toasts.

Make use of Bootstrap's unique Toasts styles to display elegant, non-intrusive alerts that seamlessly integrate into your website's design. It create interactive notifications that improve the usability and feedback mechanisms of your application.

Toasts on Bootstrap

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 © Developed by DexignZone 2025