How To Create a Snackbar / Toast Bootstrap

How To Create a Snackbar / Toast  Bootstrap

Hi, Sometimes we need to 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  bootstrap Snackbar, or we can say that a Toast. Snackbar is often used as tooltips/popups to show a message at the bottom of the screen.

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

Now, we are going to show you a cool Snackbar / Toast example for showing the Google Play Store and YouTube buttons on the bottom side of the screen as a popup with the close button.

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 a style for #snackbar with the show and hide class, use the @WebKit-keyframes method for fade-in and fade-out.

Loading...
#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");
    });

This JavaScript code will show the Snakbar after 3 seconds page load automatically. And It will disappear after 15 seconds automatically.

Related posts

(1) Comments

  • User Pic

    very nice bro, awesome and looking cool snack

Write a comment