Basic Toast
See below toast preview Bootstrap 11 mins ago
Hello, world! This is a toast message.
<div id="toast-1" class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="opacity: 1">
<img src="..." class="rounded mr-2" alt="" style="width: 32px">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
</div>
Toast CTA
See below toast preview Bootstrap 11 mins ago
Hello, world! This is a toast message.
<div id="toast-1" class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="opacity: 1">
<img src="..." class="rounded mr-2" alt="" style="width: 32px">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
</div>
<button type="button" class="btn btn-brand" onclick="$('#toast-2').toast('show')">Preview</button>
Toast Placement
Bootstrap 11 mins ago
Hello, world! This is a toast message.
Bootstrap 11 mins ago
Hello, world! This is a toast message.
Bootstrap 11 mins ago
Hello, world! This is a toast message.
Bootstrap 11 mins ago
Hello, world! This is a toast message.