Live Demo - Bootstrap 4 Alert Box With Button Demo

See Free Live Demo example of 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 downlo...

<!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">&times;</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">&times;</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">&times;</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">&times;</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
});