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.
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>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>
Color scheme
Use color utilities to change the color of the toast. You can use the .text- utilities on the parent .toast element or any descendant element to change the color of the text.
Hello, world! This is a toast message.
Code
HTML Code for this Element
<div class="toast fade show align-items-center text-bg-primary border-0" 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" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
Custom content
You can also use custom HTML as your toast's content. Just be sure to add .toast-header to the top of your markup. Below, we've created a .toast-header with a close button and a title. We've also added an .avatar to the image placeholder.