Bootstrap Toast

Basic 

<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 buttonvar toastButton = document.getElementById("toast-btn");// Get the Toast elementvar 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'    });});

Copyright © 2020 DesignReset, All rights Reserved .

Coded with