## Toast notifications

##### Toast examples

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.

##### Example toast

Notification 2 seconds ago
Hello, you can push notifications to your visitors with this toast feature.
Notification with plugins 5 mins ago
Sales in current month
Pages / Visit

#### 236 321.80

% New Visits

#### 46.11%

Last week

#### 432.021

#### Examples

#### Placement

Place toasts with custom CSS absolute properties, for example `top: 10; right: 10` The top right is often used for notifications, as is the top middle. If you’re only ever going to show one toast at a time, put the positioning styles right on the .toast.

#### Stacking

When you have multiple toasts put into wrapping element so they can easily stack.

#### Usage

Initialize toasts via JavaScript:

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

#### Methods

All API methods are asynchronous and start a transition.

Method | Example | Description
--- | --- | ---
`.toast('show')` | `$('#element').toast('show')` | Reveals an element’s toast. Returns to the caller before the toast has actually been shown (i.e. before the shown.bs.toast event occurs). You have to manually call this method, instead your toast won’t show.
`.toast('hide')` | `$('#element').toast('hide')` | Hides an element’s toast. Returns to the caller before the toast has actually been hidden (i.e. before the hidden.bs.toast event occurs). You have to manually call this method if you made autohide to false.
`.toast('dispose')` | `$('#element').toast('dispose')` | Hides an element’s toast. Your toast will remain on the DOM but won’t show anymore.

Toast example code

    <div class="toast toast-bootstrap show" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <i class="fa fa-newspaper-o"> </i>
            <strong class="mr-auto m-l-sm">Notification</strong>
            <small>2 seconds ago</small>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
        </div>
        <div class="toast-body">
            Hello, you can push notifications to your visitors with this toast feature.
        </div>
    </div>

Notification 2 seconds ago
Hello, you can push notifications to your visitors with this toast feature.
Notification 2 seconds ago
Hello, you can push notifications to your visitors with this toast feature.