How To Create a Snackbar / Toast Bootstrap

Tooltips/Popups to show a message

How To Create a Snackbar / Toast  Bootstrap

Hi, 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.

Now, we are going to show you a cool Snackbar / Toast example for showing the Google Play Store and YouTube button 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 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");
    });

 

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

S.Pratap made a post.
404 day ago

very nice bro, awesome and looking cool snack

Top