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 une legende dans un formulaire

Ajouter une legende dans un formulaire

Arrows Defense Game

Arrows Defense Game

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS

Buttons Styles Inspirations

Buttons Styles Inspirations

Calculatrice style01

Calculatrice style01

Card 4 Product Style01

Card 4 Product Style01

Compteur avec b4

Compteur avec b4

Image hover 02

Image hover 02

Organization Chart

Organization Chart

Responsive image grid

Responsive image grid

Timeline style02

Timeline style02

login page green one

login page green one