Avant UI Kit

Documentation

Toasts

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems

Initialization

Initialize via JavaScript: 

$('.toast').toast(option)

Markup

Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your “toasted” content and strongly encourage a dismiss button. 

<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <strong class="mr-auto">Toast!</strong>
        <small>11 mins ago</small>
        <button type="button" class="close ml-3" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&#10005;</span>
        </button>
    </div>
    <div class="toast-body">
        Hello, world! This is a toast message.
    </div>
</div>

Contextual toasts

Use background and text utility classes to create a contextual toast. 

<div class="toast fade show bg-warning text-white" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header bg-warning text-light">
        <strong class="mr-auto">Warning!</strong>
        <small>11 mins ago</small>
        <button type="button" class="close ml-3 text-light" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&#10005;</span>
        </button>
    </div>
    <div class="toast-body">
        This is a contextual toast.
    </div>
</div>

View the complete toast documentation at Bootstrap website.