Snackbars

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

Contents

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=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src=""></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.