Bootstrap 4 snackbar / toast

Question

I'm trying to create a snackbar / toast version with Bootstrap 4. I start with this tutorial from w3schools.

Updated: I was trying to implement a custom snackbar or toast for Bootstrap 4 but, right now, it isn't necessary beacause Bootstrap 4 includes this option from version 4.2 as @Zim says.

Answer 1

I'm not a JavaScript expert, but I managed to create a little plugin. Simply copy all JS into your project (at the top!) and call displayNotification(message, color, time, hide).

• message: The Message
• color: The color (primary is default)
• time: How long the toast should be visible in ms (2000ms is default)
• hide: false if the toast should not disappear (true is default)

Bootstrap Version 5.1

// Notifications ===============================================================

var toast_id = 1;

function getContainer() {
  var toast_container = document.getElementById('toast-container');
  if (toast_container != null)
  {

    return toast_container;
  }

  toast_container = document.createElement("div");
  toast_container.id = "toast-container";
  toast_container.classList = "toast-container position-fixed bottom-0 end-0 p-3";
  toast_container.setAttribute("style", "z-index: 11");
  document.body.appendChild(toast_container);
  return toast_container;
}

function createToast(color, color_text, id) {
  var newDiv = document.createElement("div");
  newDiv.classList.add('toast');
  newDiv.classList.add(color);
  newDiv.classList.add(color_text);
  newDiv.id = "toast-"+id;
  newDiv.setAttribute("role", "alert");
  newDiv.setAttribute("aria-live", "assertive");
  newDiv.setAttribute("aria-atomic", "true");
  return newDiv;
}

function createSnack(message, id) {
  var newDiv = document.createElement("div");
  newDiv.classList.add("toast-body");
  newDiv.classList.add("d-flex");
  newDiv.appendChild(createMessage(message, id));
  newDiv.appendChild(createCloseButton(id));
  return newDiv;
}

function createMessage(message, id) {
  var newDiv = document.createElement("div");
  newDiv.id = "message-"+id;
  newDiv.innerHTML = message;
  return newDiv;
}

function createCloseButton(id) {
  var newButton = document.createElement("button")
  newButton.classList.add("btn-close");
  newButton.classList.add("btn-close");
  newButton.classList.add("btn-close-white");
  newButton.classList.add("me-2");
  newButton.classList.add("m-auto");
  newButton.setAttribute("type", "button");
  newButton.setAttribute("data-bs-dismiss", "toast");
  newButton.setAttribute("aria-label", "Close");
  return newButton;
}

function displayNotification(message, color, time, hide){

  var color_text = 'text-white';

  switch(color) {
    case 'grey':
    case 'secondary':
      color = 'bg-secondary';
      color_text = 'text-white';
      break;
    case 'green':
    case 'success':
      color = 'bg-success';
      color_text = 'text-white';
      break;
    case 'red':
    case 'danger':
      color = 'bg-danger';
      color_text = 'text-white';
      break;
    case 'warning':
    case 'yellow':
      color = 'bg-warning';
      color_text = 'text-white';
      break;
    case 'white':
    case 'light':
      color = 'bg-light';
      color_text = 'text-dark';
      break;
    default:
      color = 'bg-primary';
      color_text = 'text-white';
      break;
  };

  if(time == null){
    time = 2000;
  }

  if(hide == null){
    hide = true;
  }

  var option =
  {
    delay: time,
    autohide: hide
  };

  var toast_container = getContainer();
  toast = createToast(color, color_text, toast_id);
  toast_container.appendChild(toast);
  toast.appendChild(createSnack(message, toast_id));

  var toast = new bootstrap.Toast(toast, option);
  toast.show();

  toast_id = toast_id + 1;
}

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<button class="btn btn-primary" id="1">Primary</button>
<button class="btn btn-secondary" id="2">Secondary</button>
<button class="btn btn-success" id="3">Success</button>
<button class="btn btn-danger" id="4">Danger</button>
<button class="btn btn-warning" id="5">Warning</button>
<button class="btn btn-light" id="6">Light</button>

<script>
var button = document.getElementById("1");

button.addEventListener('click', function () {
    displayNotification("Hello", "blue");
}, false );

var button = document.getElementById("2");

button.addEventListener('click', function () {
    displayNotification("Hello", "secondary");
}, false );

var button = document.getElementById("3");

button.addEventListener('click', function () {
    displayNotification("Hello", "success");
}, false );

var button = document.getElementById("4");

button.addEventListener('click', function () {
    displayNotification("Hello", "danger");
}, false );

var button = document.getElementById("5");

button.addEventListener('click', function () {
    displayNotification("Hello", "warning");
}, false );

var button = document.getElementById("6");

button.addEventListener('click', function () {
    displayNotification("Hello", "light");
}, false );

</script>

Answer 2

Bootstrap 4.2 now includes Toast notifications

Here's an example:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="mr-auto">Title</strong>
    <small>5 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Content... this is a toast message.
  </div>
</div>

Demo

---

More Bootstrap Toast layout/position examples:

Stacked vertically: https://codeply.com/go/3ZvZa9b8Im
Side-by-side: https://codeply.com/go/GFMde2ritI
3x3 grid: https://codeply.com/go/lj8GTFjvuK

Answer 3

I (emphasis = full disclosure) created a jQuery plugin for the toasts components to make them easier to use, the repo can be found here. The purpose was to be able to call the toasts on the fly through JavaScript.

Toast

$.toast({
  title: 'Toast',
  subtitle: '11 mins ago',
  content: 'Hello, world! This is a toast message.',
  type: 'info',
  delay: 5000
});

Snack

$.toast({
  title: 'A small bitesize snack, not a toast!',
  type: 'info',
  delay: 5000
});

Live Example

(function(b){b.toast=function(a,h,g,l,k){b("#toast-container").length||(b("body").prepend('<div id="toast-container" aria-live="polite" aria-atomic="true"></div>'),b("#toast-container").append('<div id="toast-wrapper"></div>'));var c="",d="",e="text-muted",f="",m="object"===typeof a?a.title||"":a||"Notice!";h="object"===typeof a?a.subtitle||"":h||"";g="object"===typeof a?a.content||"":g||"";k="object"===typeof a?a.delay||3E3:k||3E3;switch("object"===typeof a?a.type||"":l||"info"){case "info":c="bg-info";
f=e=d="text-white";break;case "success":c="bg-success";f=e=d="text-white";break;case "warning":case "warn":c="bg-warning";f=e=d="text-white";break;case "error":case "danger":c="bg-danger",f=e=d="text-white"}a='<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="'+k+'">'+('<div class="toast-header '+c+" "+d+'">')+('<strong class="mr-auto">'+m+"</strong>");a+='<small class="'+e+'">'+h+"</small>";a+='<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">';
a+='<span aria-hidden="true" class="'+f+'">&times;</span>';a+="</button>";a+="</div>";""!==g&&(a+='<div class="toast-body">',a+=g,a+="</div>");a+="</div>";b("#toast-wrapper").append(a);b("#toast-wrapper .toast:last").toast("show")}})(jQuery);


const TYPES = ['info', 'warning', 'success', 'error'],
      TITLES = {
        'info': 'Notice!',
        'success': 'Awesome!',
        'warning': 'Watch Out!',
        'error': 'Doh!'
      },
      CONTENT = {
        'info': 'Hello, world! This is a toast message.',
        'success': 'The action has been completed.',
        'warning': 'It\'s all about to go wrong',
        'error': 'It all went wrong.'
      };

function show_random_toast()
{
  let type = TYPES[Math.floor(Math.random() * TYPES.length)],
      title = TITLES[type],
      content = CONTENT[type];

  $.toast({
    title: title,
    subtitle: '11 mins ago',
    content: content,
    type: type,
    delay: 5000
  });
}

function show_random_snack()
{
  let type = TYPES[Math.floor(Math.random() * TYPES.length)],
      content = CONTENT[type].replace('toast', 'snack');
      
  $.toast({
    title: content,
    type: type,
    delay: 5000
  });
}

#toast-container {
    position: sticky;
    z-index: 1055;
    top: 0
}

#toast-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    margin: 5px
}

#toast-container > #toast-wrapper > .toast {
    min-width: 150px
}

#toast-container > #toast-wrapper > .toast >.toast-header strong {
    padding-right: 20px
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
      <button class="btn-block btn-primary" onclick="show_random_toast();">Show Random Toast</button>
      <br>
      <button class="btn-block btn-primary" onclick="show_random_snack();">Show Random Snack</button>

      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  </body>
</html>

Answer 4

You can try this Bootstrap toast notification with sound

$(document).ready(function() {

//success toast



var options = {
autoClose: true,
progressBar: true,
enableSounds: true,
sounds: {

info: "https://res.cloudinary.com/dxfq3iotg/video/upload/v1557233294/info.mp3",
// path to sound for successfull message:
success: "https://res.cloudinary.com/dxfq3iotg/video/upload/v1557233524/success.mp3",
// path to sound for warn message:
warning: "https://res.cloudinary.com/dxfq3iotg/video/upload/v1557233563/warning.mp3",
// path to sound for error message:
error: "https://res.cloudinary.com/dxfq3iotg/video/upload/v1557233574/error.mp3",
},
};

var toast = new Toasty(options);
toast.configure(options);





$('#successtoast').click(function() {

toast.success("This toast notification with sound");

});

$('#infotoast').click(function() {

toast.info("This toast notification with sound");

});

$('#warningtoast').click(function() {

toast.warning("This toast notification with sound");

});

$('#errortoast').click(function() {

toast.error("This toast notification with sound");

});

});

.btn {
    margin-right: 0.5rem !important
}

.btn {
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 400;
    padding: .7rem 1.5rem;
    border-radius: 0.1275rem
}

.container {
    margin-top: 100px
}

.toast {
    transition: 0.32s all ease-in-out
}

.toast-container--fade {
    right: 0;
    bottom: 0
}

.toast-container--fade .toast-wrapper {
    display: inline-block
}

.toast.fade-init {
    opacity: 0
}

.toast.fade-show {
    opacity: 1
}

.toast.fade-hide {
    opacity: 0
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1557232134/toasty.css" rel="stylesheet" />
<script src="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1557232134/toasty.js"></script>
<div class="page-content page-container" id="page-content">
    <div class="padding">
        <div class="row container d-flex justify-content-center"> <button type="button" id="successtoast" class="btn btn-success btn-icon-text"> <i class="fa fa-check btn-icon-prepend"></i>Toast Notification success sound </button> <button type="button" id="infotoast" class="btn btn-info btn-icon-text"> <i class="fa fa-check btn-icon-prepend"></i>Toast Notification info sound </button> <button type="button" id="warningtoast" class="btn btn-warning btn-icon-text"> <i class="fa fa-check btn-icon-prepend"></i>Toast Notification warning sound </button> <button type="button" id="errortoast" class="btn btn-primary btn-icon-text"> <i class="fa fa-check btn-icon-prepend"></i>Toast Notification error sound</button> </div>
    </div>
</div>

Answer 5

Sometimes we need show a piece of information to the user as a popup, but I can't use the Bootstrap modal for that. So that time we need to create a Snackbar, or we can say that a Toast. Snackbar are often used as tooltips/popups to show a message at the bottom of the screen.

Generally Toast is a popup for showing a small information to the user, this is also using in the android application. We can customize our Toast layout according to our requirement. It will be show on the screen when you call it and It will disappear after few seconds, whatever you have set.

Create your HTML code for the Snackbar with id #snackbar, you can use Bootstrap classes for the responsive design just like that:

<div class="container">
<h2 class="text-danger">Cool Snackbar/Toast demo</h2>
<div id="snackbar">
    <div class="close"><i class="fas fa-times-circle"></i></div>
    <div class="col-sm-6 col-xs-6 col-md-6">
        <a hreflang="en-in" href="https://play.google.com/" target="_blank" >
            <img src="google-play-store.png" alt="Google Play Store">
        </a>
    </div>
    <div class="col-sm-6 col-xs-6 col-md-6 second">
        <a hreflang="en-in" href="http://youtube.com/" target="_blank" >
            <img src="youtube.png" alt="YouTube Link" >
        </a>
    </div>
    <div class="clearfix"></div>
</div>
</div>

Now, we will create style for #snackbar with show and hide class, use @-webkit-keyframes method for fade-in and fade-out.

#snackbar {
visibility: hidden;
background-color: #FFFFFF;
text-align: center;
border-radius: 5px;
padding: 16px;
position: fixed;
z-index: 1;
bottom: 30px;
width:80%;
bottom: 30px;
box-shadow: 0px 0px 30px 20px grey;
}

#snackbar .close {
float:right;
color:#FF0000;
z-index: 1;
opacity: 0.6;
margin-top: -23px;
margin-right: -23px;
}

#snackbar .second {
border-left: 1px solid #FF0000
}

#snackbar img {
width:200px;
}

#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}

#snackbar.hide {
-webkit-animation: fadeout 0.5s 2.5s;
animation: fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;} 
to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;} 
to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}

After all, create your JavaScript code for #snackbar to show and hide effect.

var x = document.getElementById("snackbar");
setTimeout(function () {
    x.className = "show";
}, 3000);
setTimeout(function () {
    x.className = x.className.replace("show", "hide");
}, 15000);
$("#snackbar .close").click(function () {
    x.className = x.className.replace("show", "hide");
});

Look at full example, click on this url https://www.legendblogs.com/blog/how-to-create-a-snackbar-or-toast-bootstrap/121762