Bootstrap 4 Advanced Components : Snackbar and toast notifications

Bootstrap 4 Advanced Components : Snackbar and toast notifications

by djibe89

HTML

<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
<link rel="stylesheet" href="https://daemonite.github.io/material/css/material.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-notify@3.1.3/bootstrap-notify.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col">
      <div class="jumbotron my-4">
        <h1>Material design snackbar notifications for Bootstrap 4 Advanced Components</h1>
        <p class="lead">by djibe.</p>
        <p>
        <a href="https://material.io/design/components/snackbars.html#snackbar" target="_blank">Read Google Material design specs for Snackbars</a>
        </p>
        <p>
          Using <a href="https://github.com/mouse0270/bootstrap-notify" target="_blank">Bootstrap Notify plugin.</a><br>
          Requires animate.css if you want to use animations.
        </p>
        <button type="button" id="btn-standard" class="btn btn-primary d-block">Send me a standard bottom snackbar</button>
        <button type="button" id="btn-top" class="btn btn-primary d-block mt-4">Send me a top right notification</button>
        <button type="button" id="btn-bottom" class="btn btn-primary mt-4">Send me a bottom left notification</button>
      </div>
    </div>
  </div>
</div>

CSS

[data-notify="progressbar"] {
	margin-bottom: 0px;
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 5px;
}

div[data-notify="container"] {
  width: 344px;
  height: 48px;
}

.alert-dark {
  background: #323232;
}

JavaScript

$('#btn-standard').on('click', function(){
/* Full documentation : http://bootstrap-notify.remabledesigns.com/ */
  $.notify({
    // options
    message: 'Your first snackbar' 
  },{
    // settings
    type: 'dark',
    placement: {
      from: "bottom",
      align: "center"
    },
   offset: 0,
	spacing: 0,
    animate: {
		enter: 'animated slideInUp',
		exit: 'animated slideOutDown'
	},
  template: '<div data-notify="container" class="col-11 col-sm-3 alert alert-{0}" role="alert">' +
		'<span data-notify="icon"></span> ' +
		'<span data-notify="title">{1}</span> ' +
		'<span data-notify="message">{2}</span>' +
		'<div class="progress" data-notify="progressbar">' +
			'<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
		'</div>' +
		'<a href="{3}" target="{4}" data-notify="url"></a>' +
	'</div>' 
  });
});

$('#btn-top').on('click', function(){
/* Full documentation : http://bootstrap-notify.remabledesigns.com/ */
  $.notify({
    // options
    message: 'Your first snackbar' 
  },{
    // settings
    type: 'dark',
    placement: {
      from: "top",
      align: "right"
    },
  template: '<div data-notify="container" class="col-11 col-sm-3 alert alert-{0}" role="alert">' +
		'<span data-notify="icon"></span> ' +
		'<span data-notify="title">{1}</span> ' +
		'<span data-notify="message">{2}</span>' +
		'<div class="progress" data-notify="progressbar">' +
			'<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
		'</div>' +
		'<a href="{3}" target="{4}" data-notify="url"></a>' +
	'</div>' 
  });
});

$('#btn-bottom').on('click', function(){
/* Full documentation : http://bootstrap-notify.remabledesigns.com/ */
  $.notify({
    // options
    message: 'Your bottom left snackbar' 
  },{
    // settings
    type: 'dark',
    placement: {
      from: "bottom",
      align:...