Bootstrap 4 Toast
Bootstrap 4 Toast
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.).
How To Create a Toast
To create a toast, use the .toast class, and add a .toast-header and a
.toast-body inside of it:
<div class="toast">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
Note: Toasts must be initialized with jQuery: select the
specified element and call the toast() method.
The following code will show all "toasts" in the document:
Example
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
Try it Yourself »
Show and Hide a Toast
Toasts are hidden by default. Use the data-autohide="false"
attribute to show it by default. To close it, use a <button> element and add data-dismiss="toast":
Example
<div class="toast" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto text-primary">Toast Header</strong>
<small class="text-muted">5 mins ago</small>
<button
type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>
</div>
<div class="toast-body">
Some text
inside the toast body
</div>
</div>
Try it Yourself »
Notice the mr-auto, ml-2 and mb-1 classes? They are used to add specific margins. You will learn more about them in the Bootstrap 4 Utilities Chapter.
Complete Bootstrap Toast Reference
For a complete reference of all toast options, methods and events, go to our Bootstrap JS Toast Reference.