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; 
}

                                    
Ajouter multiple input dynamique

Ajouter multiple input dynamique

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Compteur avec b4

Compteur avec b4

Creation dune icone de prechargement avec css

Creation dune icone de prechargement avec css

Form login 03

Form login 03

Google Style Login

Google Style Login

Image hover effects style

Image hover effects style

Input range slider HTML style02

Input range slider HTML style02

Nav Menu style02

Nav Menu style02

Page 404 exemple 01

Page 404 exemple 01

Page construction avec compte à rebours style01

Page construction avec compte à rebours style01

Social Media Icons

Social Media Icons