Documentation
Toasts
The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).
Default markup
Mallory Hulme
11 mins ago
Hello, world! This is a toast message.
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
<div class="toast-header">
<span class="avatar avatar-sm mr-2" style="background-image: url(./static/avatars/002m.jpg)"></span>
<strong class="mr-auto">Mallory Hulme</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>