"Snackbar / Toast"
Bootstrap 4.0.0 Snippet by inmedev

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #snackbar { visibility: hidden; min-width: 250px; margin-left: -125px; background-color: #333; color: #fff; text-align: center; border-radius: 2px; padding: 16px; position: fixed; z-index: 1; left: 50%; bottom: 30px; font-size: 17px; } #snackbar.show { visibility: visible; -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; animation: fadein 0.5s, 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;} } </style> </head> <body> <h2>Snackbar / Toast</h2> <p>Snackbars are often used as a tooltips/popups to show a message at the bottom of the screen.</p> <p>Click on the button to show the snackbar. It will disappear after 3 seconds.</p> <button onclick="myFunction()">Show Snackbar</button> <div id="snackbar">Some text some message..</div> <script> function myFunction() { var x = document.getElementById("snackbar") x.className = "show"; setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000); } </script> </body> </html>

Related: See More


Questions / Comments: