Bootstrap 4 Toast


Basic Toast

Toast on Bootstrap looks a bit like an alert box, showing when something happens for a few seconds (when the user clicks a button, submits a form, and so on).

Toast header 1 mins ago
This is an example text.

How to create a toast

To make toast, you need to apply .toast class. To put the heading inside the toast box, add the .toast-header class and the .toast-body class to add any content to the body inside it.

<div class="toast">
<div class="toast-header">
Toast header
</div>
<div class="toast-body">
Toast body
</div>
</div>

To show the toast box, you need to initialize jQuery and call the toast() method.

<script type="text/javascript">
$(document).ready(function(){
$('.toast').toast('show');			
});
</script>

Show and Hide Toast

By default, the toast box is hidden for some time (data-autohide = "false" this feature is in the default toast box). But if you want to manually close the toast box with the button, then data-dismiss = "toast" then apply this attribute. The following is an example of this:

<div class="toast" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto text-info">Toast header</strong>
<small class="text-muted">1 mins ago</small>
<button class="ml-2 mb-1 close" data-dismiss="toast">&times;</button>
</div>
<div class="toast-body">
This is an example text.
</div>
</div>