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.

Step To Create Bootstrap 4 Toast

Add .toast class to the toast container i.e parent container of toast.
Add .toast-header class inside .toast element direct children.
Add .toast-body class inside .toast element last children.
Select the toast element and call the bootstrap toast method using jquery.

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

Example

General Syntax

      <button type="button" class="btn btn-primary" id="buttonCustomId">Click To See Toast Effect</button>
<div class="toast">
  <div class="toast-header">
    <h3>Toast Header</h3>
  </div>
  <div class="toast-body">
    <p class="text-justify">Toast Content</p>
  </div>
</div>

Try it now

Source Code

          <div class="container text-center mt-4">
  <button type="button" class="btn btn-primary" id="buttonidinfo">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><!--/container-->

Try it now

Source Code: Output

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

Note: In this example, bootstrap toast is initialized by the bootstrap toast method using jquery.

Bootstrap toast is a small alert box that pops up whenever users click on any link, button, or submit forms.

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>

Try it now

Source Code

          <div class="container text-center mt-4">
  <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">&times;</button>
    </div>
    <div class="toast-body">
      Understand bootstrap grid system and classes to make the best website design.
    </div>
  </div>
</div>

Try it now

Source Code: Output

Understand bootstrap grid system and classes to make the best website design.

Note: In this example, bootstrap data-autohide="false" attribute is used to show the toast.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4