Snackbars

This UI Kit is dedicated to Bootstrap 4 & Material Design.

Discover the latest Kit for Bootstrap 5 & Material Design 2.0! DOWNLOAD BOOTSTRAP 5 FREE KIT

Get Material KIT PRO 20% OFF

Use code 5V9QGF on the checkout to get the discount. GET MATERIAL KIT PRO

Snackbars and toasts can be created using the SnackbarJS plugin developed by us.

Contents
Include in the page
Examples
- Snackbar
- Toast
Usage

Include in the page

In order to make snackbars work, make sure to include snackbar.min.js before bootstrap-material-design.min.js.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>

<!-- SnackbarJS plugin -->
<script src="https://cdn.rawgit.com/FezVrasta/snackbarjs/1.1.0/dist/snackbar.min.js"></script>

<script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
<script>
  $('body').bootstrapMaterialDesign();
</script>

Heads up! You don’t need to include SnackbarJS CSS, it’s already bundled in Material Design for Bootstrap.

Examples

Click on the buttons below to spawn snackbars and toasts:

Snackbar

<button type="button" class="btn btn-secondary" data-toggle="snackbar" data-content="Free fried chicken here! <a href='https://example.org' class='btn btn-info'>Check it out</a>" data-html-allowed="true" data-timeout="0">
  Snackbar
</button>

Toast

<button type="button" class="btn btn-secondary" data-toggle="snackbar" data-style="toast" data-content="Fried chicken out of stock.">
  Toast
</button>

Usage

The complete documentation of SnackbarJS is available visiting its official GitHub repository.