BS4 Toast
Bootstrap 4 Toast
The toast component is basically an alert box that is only visible for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).
==== button mukavu ====
How To Create a Toast
Use the .toast class and include a .toast-header and .toast-body to generate a toast:
<div class="toast">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
Note: To start a toast, pick the desired element and use the toast() method. This requires the initialization of jQuery.
All of the “toasts” in the page will be displayed by the code below:
Example
<script>window.addEventListener('DOMContentLoaded', function() {
$(document).ready(function(){
$('.toast').toast('show');
});
});</script>
Show and Hide a Toast
Toasts are by default not visible. To make it visible by default, use the data-autohide=”false” attribute. Use a <button> element and add data-dismiss=”toast” to close it:
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>
Take note of the ml-2, mb-1, and mr-auto classes. They are applied to provide designated margins. More about them is covered in the chapter on Bootstrap 4 Utilities.
