Bootstrap 4 toast is basically a small alert box that appears for a couple of seconds whenever the user clicks on any link or submits a form.
Bootstrap toast is a small alert box that pops up whenever users click on any link, button, or submit forms.
Step1: Add .toast
class to the toast container i.e parent container of toast.
Step2: Add .toast-header
class inside .toast
element direct children.
Step3: Add .toast-body
class inside .toast
element last children.
Step4: Select toast element and call bootstrap toast method using jQuery.
$(document).ready(function(){
$('.toast').toast('show');
});
General Syntax
<div class="toast">
<div class="toast-header">
<h3>Bootstrap Toast Header</h3>
</div>
<div class="toast-body">
<p class="text-justify">Bootstrap 4 Toast Content</p>
</div>
</div>
<!--/toast-->
Source Code
<div class="container my-2">
<button type="button" class="btn btn-primary" id="buttonId">Click To See Toast Effect</button>
<div class="toast">
<div class="toast-header">
<h3>Bootstrap Toast</h3>
</div>
<div class="toast-body">
<p class="text-justify">
Toast is a small alert box that will be visible for a couple of seconds whenever the user clicks on any link,
button, or submit the
</p>
</div>
</div>
<!--/toast-->
</div>
Try it yourself
Note: In this example, bootstrap toast is initialized by the bootstrap toast method using jquery.
Bootstrap toast is hidden by default but it can be shown by using data-autohide="false"
data attribute. To close this toast ,use a <button>
element and assign it to data-dismiss="toast"
.
General Syntax
<div class="toast" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto text-primary">Learn Bootstrap</strong>
<small class="text-muted">CSS Framework</small>
<button type="button" class="ml-2 mb-2 close" data-dismiss="toast"></button>
</div>
<div class="toast-body">
Write toast body content.
</div>
</div>
Source Code
<div class="container my-2">
<div class="toast" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto text-primary">Learn Bootstrap</strong>
<small class="text-muted">CSS Framework</small>
<button type="button" class="ml-2 mb-2 close" data-dismiss="toast">×</button>
</div>
<div class="toast-body">
Understand bootstrap grid system and classes to make the best website design.
</div>
</div>
</div>
<!--/container-->
Try it yourself
Note:In this example, bootstrap data-autohide="false"
attribute is used to show the toast.