Bootstrap 4 Toast

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.

Step To Create Bootstrap Toast

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.

Dropdown menu

   	
   $(document).ready(function(){
		  $('.toast').toast('show');
		});
   

Example

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-->
	  
Try It Now

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.

Toast: Hide/Show

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>
	  
Try It Now

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.

Our Tutorials

Bootstrap 4 Toast
Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS