Alert Bootstrap4 style01

<!DOCTYPE html>
<html>
<head>
	<title>BACKGROUND OVERLAY | par NGLESSON</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="BACKGROUND OVERLAY">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link href="style.css" rel="stylesheet">
</head>
<body>

	<div class="container mt-5">
		<h2 class="text-center">Bootstrap 4 Alerts</h2><br>
		<div class="alert alert-green alert-dismissible">
		  <button type="button" class="close" data-dismiss="alert"><i class="fa fa-times"></i></button>
		  <strong>Information !</strong> This alert box could indicate a successful or positive action.
		</div>
		<div class="alert alert-red alert-dismissible">
		  <button type="button" class="close" data-dismiss="alert"><i class="fa fa-times"></i></button>
		  <strong>Information !</strong> This alert box could indicate a neutral informative change or action.
		</div>
		<div class="alert alert-blue alert-dismissible">
		  <button type="button" class="close" data-dismiss="alert"><i class="fa fa-times"></i></button>
		  <strong>Information !</strong> This alert box could indicate a warning that might need attention.
		</div>
		<div class="alert alert-orange alert-dismissible">
		  <button type="button" class="close" data-dismiss="alert"><i class="fa fa-times"></i></button>
		  <strong>Information !</strong> This alert box could indicate a dangerous or potentially negative action.
		</div>
		<div class="alert alert-violet alert-dismissible">
			<button type="button" class="close" data-dismiss="alert"><i class="fa fa-times"></i></button>
			<strong>Information !</strong> This alert box could indicate a successful or positive action.
		  </div>
		  <div class="alert alert-brown alert-dismissible">
			<button type="button" class="close" data-dismiss="alert"><i class="fa fa-times"></i></button>
			<strong>Information !</strong> This alert box could indicate a neutral informative change or action.
		  </div>
		  <div class="alert alert-olive alert-dismissible">
			<button type="button" class="close" data-dismiss="alert"><i class="fa fa-times"></i></button>
			<strong>Information !</strong> This alert box could indicate a warning that might need attention.
		  </div>
		  <div class="alert alert-indigo alert-dismissible">
			<button type="button" class="close" data-dismiss="alert"><i class="fa fa-times"></i></button>
			<strong>Information !</strong> This alert box could indicate a dangerous or potentially negative action.
		  </div>
	</div>


	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>                       
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> 
	<script src="script.js"></script>
</body>
</html>
.fa{
    font-size: 10px;
    position: absolute;
    top: 10px;
    right: 10px;
}
.alert-green{
    color: #FFF;
    background-color: #3CB371;
    border-color: #3CB371;
}
.alert-red{
    color: #FFF;
    background-color: #FF0000;
    border-color: #FF0000;
}
.alert-blue{
    color: #FFF;
    background-color: #4169E1;
    border-color: #4169E1;
}
.alert-orange{
    color: #FFF;
    background-color: #FFA500;
    border-color: #FFA500; 
}

.alert-violet{
    color: #FFF;
    background-color: #EE82EE;
    border-color: #EE82EE; 
}
.alert-brown{
    color: #FFF;
    background-color: #8B4513;
    border-color: #8B4513; 
}
.alert-olive{
    color: #FFF;
    background-color: #808000;
    border-color: #808000; 
}
.alert-indigo{
    color: #FFF;
    background-color: #4B0082;
    border-color: #4B0082; 
}

                                    
Vers le haut

Vers le haut

Scroll to div ID

Scroll to div ID

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Login Bootstrap3

Login Bootstrap3

Input file style01

Input file style01

Header with background animate 01

Header with background animate 01

Form login 03

Form login 03

Footer Responsive avec Bootstrap4

Footer Responsive avec Bootstrap4

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Carousel Bootstrap4

Carousel Bootstrap4

Card Bootstrap4 02

Card Bootstrap4 02

Calculer la some des colones avec jquery

Calculer la some des colones avec jquery