Snackbar

<!-- Left Snackbar -->
<button type="button" class="btn btn-indigo" id="show-snackbar-left">Show Snackbar</button>
<div class="snackbar snackbar-left" id="snackbar-left">This is a Snackbar</div>
                        

<script>
    $('#show-snackbar-left').on('click', function () {
        $('#snackbar-left').snackbar();
    });
</script>

<!-- Snackbar -->
<div class="snackbar" id="snackbar">This is a Snackbar</div>

<!-- Right Snackbar -->
<div class="snackbar snackbar-right" id="snackbar-right">This is a Snackbar</div>

<!-- Dismissible Snackbar -->
<button type="button" class="btn btn-indigo" id="show-snackbar-dismissible">
    Show Snackbar
</button>
<div class="snackbar" id="snackbar-dismissible">
    This is a Snackbar
    <button type="button" class="btn btn-text-lime" data-dismiss="snackbar">
        Dismiss
    </button>
</div>
                        

<script>
    $('#show-snackbar-dismissible').on('click', function () {
        $('#snackbar-dismissible').snackbar({
            'autoClose': false
        });
    });
</script>

<!-- Snackbar with custom visible duration -->
<button type="button" class="btn btn-indigo" id="show-snackbar-custom-duration">
    Show Snackbar
</button>
<div class="snackbar" id="snackbar-custom-duration">
    This snackbar will be visible for 5000ms
</div>
                        

<script>
    $('#show-snackbar-custom-duration').on('click', function () {
        $('#snackbar-custom-duration').snackbar({
            'visibleDuration': 5000
        });
    });
</script>