Bootstrap 4 Toast

Toasts are lightweight notifications designed to mimic push alerts. When something occurs like a user clicks on a button, submits a form, etc., the toast component functions similarly to an alert box that appears for a brief moment.

How To Create a Toast

Use the .toast class along with .toast-header and .toast-body.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="mr-auto">Credo Systemz</strong>
    <small>Just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>
  </div>
  <div class="toast-body">
    Welcome to the best HTML tutorials!
  </div>
</div>

Show and Hide a Toast

By default, toasts are hidden. To make it visible by default, use the data-autohide="false" attribute. Use a button element and add data-dismiss="toast" to close it. Use JavaScript to control toast visibility.

$('.toast').toast('show');

To hide:

$('.toast').toast('hide');

You can also configure auto-hide, delay, and animation options.

Auto-hide with delay:


$('.toast').toast({ delay: 3000 });
$('.toast').toast('show');

Conclusion

Bootstrap 4’s Custom Forms and Toasts give your website a polished, modern feel and improve user interaction. With just a few classes, you can create beautiful form elements and functional notifications. Make use of clear examples and output for clear understanding.

In our next blog, we’ll explore Bootstrap Utilities, Flex, Icons, media object, and topics like filters, offcanvas and dark mode, which are added tools in Bootstrap 5 — powerful tools that enhance layouts, responsiveness, and visuals on your webpage. Many utility/helper classes in Bootstrap 4 and Bootstrap 5 allow you to style items rapidly without knowing any CSS code. So let’s explore it in detailed view to understand clearly.

Request more information

Bootstrap 4 Toast