BOOTSTRAP BASIC
BOOTSTRAP ADVANCED
BOOTSTRAP EXAMPLES
BOOTSTRAP ARCHIVE
SPONSORED LINKS
Advertisements

Bootstrap Toasts

In this tutorial you will learn how to use the Bootstrap toast component.

Creating the Toasts with Bootstrap

The toast component is newly introduced in Bootstrap 4. They are lightweight notifications similar to push notifications that are shown by web browsers on computer screens. They're built with flexbox, so you can easily align and position them on a web page.

Additionally, toasts are opt-in for performance reasons, like tooltips, so you must initialize them yourself with toast() method. Also, toasts will automatically hide after 500 milliseconds (0.5 second), if you do not specify autohide: false. Now let's see how to create a toast.

Step 1: Adding the Toast Markup

Toasts markups are pretty straightforward. The following example will show you how to create a toast component with a header, body, and a close button.

<div class="toast" id="myToast">
    <div class="toast-header">
        <strong class="mr-auto"><i class="fa fa-grav"></i> We miss you!</strong>
        <small>11 mins ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button>
    </div>
    <div class="toast-body">
        It's been a long time since you visited us. We've something special for you. <a href="#">Click here!</a>
    </div>
</div>

Step 2: Triggering the Toasts

Toasts can be triggered via JavaScript — just call the toast() Bootstrap method with the id, class or any CSS selector of the target element in your JavaScript code.

<script>
$(document).ready(function(){
    $("#myToast").toast('show');
});
</script>

— The output of the above example will look something like this:


Stacking Toasts Vertically

Multiple toasts are vertically stacked in a readable manner automatically. Here's an example:

<div class="toast fade show">
    <div class="toast-header">
        <strong class="mr-auto"><i class="fa fa-globe"></i> Hello, world!</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button>
    </div>
    <div class="toast-body">
        This is a basic toast message.
    </div>
</div>

<div class="toast fade show">
    <div class="toast-header">
        <strong class="mr-auto"><i class="fa fa-globe"></i> Hello, world!</strong>
        <small class="text-muted">5 minutes ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button>
    </div>
    <div class="toast-body">
        See? This is another toast message.
    </div>
</div>

— The output of the above example will look something like this:


Placement of Toasts

You can place toasts anywhere on your web page using custom CSS. However, the top right or top middle side is recommended for notifications. Also, if you only want to show one toast at a time, put the positioning styles inline i.e. directly on the .toast element.

<!-- Wrapping element -->
<div style="position: relative; min-height: 300px;">
    <!-- Position toasts -->
    <div style="position: absolute; top: 0; right: 0;">
        <div class="toast fade show">
            <div class="toast-header">
                <strong class="mr-auto"><i class="fa fa-globe"></i> Hello, world!</strong>
                <small class="text-muted">just now</small>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button>
            </div>
            <div class="toast-body">
                This is a basic toast message.
            </div>
        </div>

        <div class="toast fade show">
            <div class="toast-header">
                <strong class="mr-auto"><i class="fa fa-globe"></i> Hello, world!</strong>
                <small class="text-muted">5 minutes ago</small>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button>
            </div>
            <div class="toast-body">
                See? This is another toast message.
            </div>
        </div>
    </div>    
</div>

— The output of the above example will look something like this:


Options

There are certain options which can be passed to toast() Bootstrap method to customize the functionality of a toast. Options can be passed via data attributes or JavaScript.

For setting the toast options via data attributes, just append the option name to data-, such as data-autohide="false", data-delay="3000", etc.

Name Type Default Value Description
animation boolean true Apply a CSS fade transition to the toast.
autohide boolean true Auto hide the toast.
delay number 500 Delay hiding the toast (ms).

Data attributes provides an easy way for setting the toast options, however JavaScript is the more preferable way as it prevents you from repetitive work. See the .toast(options) method in the section below to know how to set the options for toasts using JavaScript.

In the following example we've set the autohide option to false using the data attribute (line no-1) which prevents the toast from closing automatically.

<div class="toast" data-autohide="false">
    <div class="toast-header">
        <strong class="mr-auto"><i class="fa fa-grav"></i> We miss you!</strong>
        <small>11 mins ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body">
        <div>It's been a long time since you visited us. We've something special for you. <a href="#">Click here!</a></div>
    </div>
</div>

Methods

These are the standard bootstrap's toast methods:

This method activates the content as a toast. It also allows you to set options for them.

The jQuery code in the following example will prevent the toast from closing automatically.

<script>
$(document).ready(function(){
    $(".show-toast").click(function(){
        $("#myToast").toast({
            autohide: false
        });
    }); 
});
</script>

The following jQuery code will increase the autohide time of toast to 3 seconds.

<script>
$(document).ready(function(){
    $(".show-toast").click(function(){
        $("#myToast").toast({
            delay: 3000
        });
    }); 
});
</script>

.toast('show')

This method is used to display the toast.

<script>
$(document).ready(function(){
    $(".show-toast").click(function(){
        $("#myToast").toast('show');
    });
});
</script>

.toast('hide')

This method is used to hide toast. You've to manually call this method if you set autohide to false.

<script>
$(document).ready(function(){
    $(".hide-toast").click(function(){
        $("#myToast").toast('hide');
    });
});
</script>

.toast('dispose')

This method hides the toast. It will remain on the DOM but won't show anymore.

<script>
$(document).ready(function(){
    $(".dispose-toast").click(function(){
        $("#myToast").toast('dispose');
    });
});
</script>

Bootstrap's modal class includes few events for hooking into modal functionality.

Event Description
show.bs.toast This event fires immediately when the show instance method is called.
shown.bs.toast This event is fired when the toast has been made visible to the user. It will wait until the CSS transition process has been fully completed before getting fired.
hide.bs.toast This event is fired immediately when the hide instance method has been called.
hidden.bs.toast This event is fired when the toast has finished being hidden from the user. It will wait until the CSS transition process has been fully completed before getting fired.

The following example displays an alert message to the user when fade out transition of the modal window has been fully completed.

<script>
$(document).ready(function(){
    $("#myToast").on('hidden.bs.toast', function(){
        alert("Toast component has been completely closed.");
    });
});
</script>
Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.