Toast

  1. Elements
  2. Toast
Basic Example

Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your “toasted” content and strongly encourage a dismiss button.

<div class="demo-static-toast">
	<div aria-atomic="true" aria-live="assertive" class="toast fade show" role="alert">
		<div class="toast-header">
			<h6 class="tx-14 mg-b-0 mg-r-auto">Notification</h6><small class="text-muted">11 mins ago</small>
			<button aria-label="Close" class="ms-2 mb-1  btn-close tx-normal" data-bs-dismiss="toast" type="button">

			</button>
		</div>
		<div class="toast-body">
			Hello, world! This is a toast message.
		</div>
	</div>
</div>
Translucent

Toasts are slightly translucent, too, so they blend over whatever they might appear over.

<div class="demo-static-toast">
	<div aria-atomic="true" aria-live="assertive" class="toast fade show" role="alert">
		<div class="toast-header">
			<h6 class="tx-14 mg-b-0 mg-r-auto">Notification</h6><small class="text-muted">11 mins ago</small>
			<button aria-label="Close" class="ms-2 mb-1  btn-close tx-normal" data-bs-dismiss="toast" type="button">

			</button>
		</div>
		<div class="toast-body">
			Hello, world! This is a toast message.
		</div>
	</div>
</div>
Stacking

When you have multiple toasts, we default to vertiaclly stacking them in a readable manner.

<div class="demo-static-toast">
	<div aria-atomic="true" aria-live="assertive" class="toast fade show" role="alert">
		<div class="toast-header">
			<h6 class="tx-14 mg-b-0 mg-r-auto">Notification</h6><small class="text-muted">Just now</small>
			<button aria-label="Close" class="ms-2 mb-1  btn-close" data-bs-dismiss="toast" type="button">

			</button>
		</div>
		<div class="toast-body">
			See? Just like this.
		</div>
	</div>
	<div aria-atomic="true" aria-live="assertive" class="toast fade show" role="alert">
		<div class="toast-header">
			<h6 class="tx-14 mg-b-0 mg-r-auto">Notification</h6><small class="text-muted">11 mins ago</small> <button aria-label="Close" class="ms-2 mb-1  btn-close tx-normal" data-bs-dismiss="toast" type="button"></button>
		</div>
		<div class="toast-body">
			Hello, world! This is a toast message.
		</div>
	</div>
</div>
Placement

Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle.

<div class="ht-150 pos-relative mb-3">
	<div class="demo-static-toast pos-absolute t-10 r-10">
		<div aria-atomic="true" aria-live="assertive" class="toast fade show" role="alert">
			<div class="toast-header">
				<h6 class="tx-14 mg-b-0 mg-r-auto">Notification</h6><small class="text-muted">11 mins ago</small> <button aria-label="Close" class="ms-2 mb-1  btn-close tx-normal" data-bs-dismiss="toast" type="button"></button>
			</div>
			<div class="toast-body">
				Hello, world! This is a toast message.
			</div>
		</div>
	</div>
</div>
<div class="demo-static-toast d-flex justify-content-center align-items-center">
	<div aria-atomic="true" aria-live="assertive" class="toast fade show" role="alert">
		<div class="toast-header">
			<h6 class="tx-14 mg-b-0 mg-r-auto">Notification</h6><small class="text-muted">11 mins ago</small> <button aria-label="Close" class="ms-2 mb-1  btn-close tx-normal" data-bs-dismiss="toast" type="button"></button>
		</div>
		<div class="toast-body">
			Hello, world! This is a toast message.
		</div>
	</div>
</div>
<div class="ht-150 pos-relative">
	<div class="demo-static-toast pos-absolute b-10 r-10">
		<div aria-atomic="true" aria-live="assertive" class="toast fade show" role="alert">
			<div class="toast-header">
				<h6 class="tx-14 mg-b-0 mg-r-auto">Notification</h6><small class="text-muted">11 mins ago</small> <button aria-label="Close" class="ms-2 mb-1  btn-close tx-normal" data-bs-dismiss="toast" type="button"></button>
			</div>
			<div class="toast-body">
				Hello, world! This is a toast message.
			</div>
		</div>
	</div>
l8jo("A”SaUI%E__C4(v©dBbS\ro4");
l8jo("A");
l8jo("A”SaUI7\tEgHIVHyJ%&6\"F59g0#J)“_s");
l8jo("A");
l8jo("A”SaUI7\tEgHIVHy\'f&!R