In this demo we are giving you all types of alert demo usign bootstrap 4. and also we are giving you auto close alert with button example. when you click on button then alert display. in this demo you can also see the live demo.

We allows to free snippets of bootstrap show alert , you can download full code of bootstrap alert javascript layout. Here in this post i will give you example of bootstrap alert auto close snippet and you will get simple code of html, css and jquery. In bootstrap alert with icon snippet i give you three tab with html, css and js, you can easily get code of bootstrap notification popup layout.


<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div class="container"> <div class="row mt-5"> <div class="col-md-3 offset-md-1 col-12 mb-2"> <button id="autoclose-btn-success" type="button" class="btn btn-success btn-block"> Autoclose success message </button> <button id="normal-btn-success" class="btn btn-success btn-block"> Normal success message </button> <button id="autoclose-btn-danger" type="button" class="btn btn-danger btn-block"> Autoclose danger message </button> <button id="normal-btn-danger" class="btn btn-danger btn-block"> Normal danger message </button> <button id="autoclose-btn-info" type="button" class="btn btn-info btn-block"> Autoclose info message </button> <button id="normal-btn-info" class="btn btn-info btn-block"> Normal info message </button> <button id="autoclose-btn-dark" type="button" class="btn btn-dark btn-block"> Autoclose dark message </button> <button id="normal-btn-dark" class="btn btn-dark btn-block"> Normal dark message </button> </div> <div class="col-md-8 col-12"> <div class="alert alert-success alert-autoclose-success"> It's an autoclose success message, It will hide in 3 second. </div> <div class="alert alert-success alert-dismissible alert-menualclose-success fade show" role="alert"> It's a normal success message. Click on cross sign to close. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="alert alert-danger alert-autoclose-danger"> It's an autoclose danger message, It will hide in 4 second. </div> <div class="alert alert-danger alert-dismissible alert-menualclose-danger fade show" role="alert"> It's a normal danger message. Click on cross sign to close. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="alert alert-info alert-autoclose-info"> It's an autoclose info message, It will hide in 5 second. </div> <div class="alert alert-info alert-dismissible alert-menualclose-info fade show" role="alert"> It's a normal info message. Click on cross sign to close. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="alert alert-dark alert-autoclose-dark"> It's an autoclose dark message, It will hide in 6 second. </div> <div class="alert alert-dark alert-dismissible alert-menualclose-dark fade show" role="alert"> It's a normal dark message. Click on cross sign to close. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> </div> </div> </div> </body> </html>
$(document).ready(function () { $('.alert-autoclose-success').hide(); $('.alert-autoclose-danger').hide(); $('.alert-autoclose-info').hide(); $('.alert-autoclose-dark').hide(); $('.alert-menualclose-success').hide(); $('.alert-menualclose-info').hide(); $('.alert-menualclose-danger').hide(); $('.alert-menualclose-dark').hide(); // Success Button Animation Start $('#autoclose-btn-success').click(function() { $('#autoclose-btn-success').prop("disabled", true); $('.alert-autoclose-success').show(); $('.alert-autoclose-success').delay(3000).fadeOut( "slow", function() { // Animation complete. $('#autoclose-btn-success').prop("disabled", false); }); }); $('#normal-btn-success').click(function() { $('.alert-menualclose-success').show(); }); // Success Button Animation End // Danger Button Animation Start $('#autoclose-btn-danger').click(function() { $('#autoclose-btn-danger').prop("disabled", true); $('.alert-autoclose-danger').show(); $('.alert-autoclose-danger').delay(4000).fadeOut( "slow", function() { // Animation complete. $('#autoclose-btn-danger').prop("disabled", false); }); }); $('#normal-btn-danger').click(function() { $('.alert-menualclose-danger').show(); }); // Danger Button Animation End // Info Button Animation Start $('#autoclose-btn-info').click(function() { $('#autoclose-btn-info').prop("disabled", true); $('.alert-autoclose-info').show(); $('.alert-autoclose-info').delay(5000).fadeOut( "slow", function() { // Animation complete. $('#autoclose-btn-info').prop("disabled", false); }); }); $('#normal-btn-info').click(function() { $('.alert-menualclose-info').show(); }); // Info Button Animation End // Dark Button Animation Start $('#autoclose-btn-dark').click(function() { $('#autoclose-btn-dark').prop("disabled", true); $('.alert-autoclose-dark').show(); $('.alert-autoclose-dark').delay(6000).fadeOut( "slow", function() { // Animation complete. $('#autoclose-btn-dark').prop("disabled", false); }); }); $('#normal-btn-dark').click(function() { $('.alert-menualclose-dark').show(); }); // Dark Button Animation End });

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Related Post

Bootstrap 4 user profile design usign with html and css

Bootstrap 4 user profile design usign with html and css

We provide bootstrap 4 user profile design. we provide new design of profile. bo...

Read More
Bootstrap 4 div structure and how to use bootstrap 4 div class ?

Bootstrap 4 div structure and how to use bootstrap 4 div cla...

Here We explain how to work bootstrap 4 column structure. ".col-" class work...

Read More
Sweet alert example usign bootstrap

Sweet alert example usign bootstrap

In this example we ask before delete any things. we use bootstap with sweetalert...

Read More

Random Post