#### Bootstrap Toast

#### Basic

Bootstrap just now
Hello, world! This is a toast message.

    <button id="toast-btn" class="btn btn-primary">Open Toast</button>

    <!-- Toast Element -->

    <div style="position: absolute; top: 0; right: 22px;left: 22px;z-index: 9999;">
        <div class="toast toast-primary fade hide" role="alert" data-delay="6000" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <strong class="mr-auto">Bootstrap</strong>
                <small class="meta-time">just now</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, world! This is a toast message.
            </div>
        </div>
    </div>

    // Get the Toast button
    var toastButton = document.getElementById("toast-btn");
    // Get the Toast element
    var toastElement = document.getElementsByClassName("toast")[0];

    toastButton.onclick = function() {
        $('.toast').toast('show');
    }

#### SnackBar

#### Basic

    <button class="btn btn-primary default">Default</button>

    $('.default').click(function() {
       Snackbar.show({text: 'Example notification text.', duration: 100000});
    });

#### Top Left

    <button class="btn btn-success top-left">Top Left</button>

    $('.top-left').click(function() {
        Snackbar.show({
            text: 'Example notification text.',
            pos: 'top-left'
        });
    });

#### Top Center

    <button class="btn btn-info top-center">Top Center</button>

    $('.top-center').click(function() {
        Snackbar.show({
            text: 'Example notification text.',
            pos: 'top-center'
        });
    });

#### Top Right

    <button class="btn btn-danger top-right">Top Right</button>

    $('.top-right').click(function() {
        Snackbar.show({
            text: 'Example notification text.',
            pos: 'top-right'
        });
    });

#### Bottom Left

    <button class="btn btn-warning bottom-left">Bottom Left</button>

    $('.bottom-left').click(function() {
        Snackbar.show({
            text: 'Example notification text.',
            pos: 'bottom-left'
        });
    });

#### Bottom Center

    <button class="btn btn-secondary bottom-center">Bottom Center</button>

    $('.bottom-center').click(function() {
        Snackbar.show({
            text: 'Example notification text.',
            pos: 'bottom-center'
        });
    });

#### Bottom right

    <button class="btn btn-dark bottom-right">Bottom right</button>

    $('.bottom-right').click(function() {
        Snackbar.show({
            text: 'Example notification text.',
            pos: 'bottom-right'
        });
    });

#### No Action

    <button class="btn btn-default no-action">No Action</button>

    $('.no-action').click(function() {
        Snackbar.show({
            showAction: false
        });
    });

#### Action Text

    <button class="btn btn-button-2 action-text">Action Text</button>

    $('.action-text').click(function() {
        Snackbar.show({
            actionText: 'Thanks!'
        });
    });

#### Text Color

    <button class="btn btn-button-3 text-color">Text Color</button>

    $('.text-color').click(function() {
        Snackbar.show({
            actionTextColor: '#e2a03f',
        });
    });

#### Click Callback

    <button class="btn btn-button-4 click-callback">Click Callback</button>

    $('.click-callback').click(function() {
        Snackbar.show({
            text: 'Custom callback when action button is clicked.',
            width: 'auto',
            onActionClick: function(element) {
                //Set opacity of element to 0 to close Snackbar
                $(element).css('opacity', 0);
                Snackbar.show({
                    text: 'Thanks for clicking the  Dismiss  button!',
                    showActionButton: false
                });
            }
        });
    });

#### Duration

    <button class="btn btn-button-5 duration">Duration</button>

    $('.duration').click(function() {
        Snackbar.show({
            text: 'Duration set to 5s',
            duration: 5000,
        });
    });

#### Background Color

    =============
        Primary
    =============

    <button class="btn btn-primary snackbar-bg-primary">Primary</button>

    $('.snackbar-bg-primary').click(function() {
        Snackbar.show({
            text: 'Primary',
            actionTextColor: '#fff',
            backgroundColor: '#1b55e2'
        });
    });

    =============
        Info
    =============

    <button class="btn btn-info snackbar-bg-info">Info</button>

    $('.snackbar-bg-info').click(function() {
        Snackbar.show({
            text: 'Info',
            actionTextColor: '#fff',
            backgroundColor: '#2196f3'
        });
    });

    =============
       Success
    =============

    <button class="btn btn-success snackbar-bg-success">Success</button>

    $('.snackbar-bg-success').click(function() {
        Snackbar.show({
            text: 'Success',
            actionTextColor: '#fff',
            backgroundColor: '#8dbf42'
        });
    });

    =============
       Warning
    =============

    <button class="btn btn-warning snackbar-bg-warning">Warning</button>

    $('.snackbar-bg-warning').click(function() {
        Snackbar.show({
            text: 'Warning',
            actionTextColor: '#fff',
            backgroundColor: '#e2a03f'
        });
    });

    =============
       Danger
    =============

    <button class="btn btn-danger snackbar-bg-danger">Danger</button>

    $('.snackbar-bg-danger').click(function() {
        Snackbar.show({
            text: 'Danger',
            actionTextColor: '#fff',
            backgroundColor: '#e7515a'
        });
    });

    =============
       Dark
    =============

    <button class="btn btn-dark snackbar-bg-dark">Dark</button>

    $('.snackbar-bg-dark').click(function() {
        Snackbar.show({
            text: 'Dark',
            actionTextColor: '#fff',
            backgroundColor: '#3b3f5c'
        });
    });