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 supprimer dynamiquement des lignes sur un tableau

Ajouter supprimer dynamiquement des lignes sur un tableau

Bootstrap4 datepicker

Bootstrap4 datepicker

Carousel Bootstrap4

Carousel Bootstrap4

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Créer une input search animée

Créer une input search animée

Dropdown right aligned B4

Dropdown right aligned B4

Footer Responsive avec Bootstrap4

Footer Responsive avec Bootstrap4

Image hover 02

Image hover 02

Image hover effects style

Image hover effects style

Scroll down button 01

Scroll down button 01

Table bootstrap with Datatable

Table bootstrap with Datatable

Texte Block Posts Style01

Texte Block Posts Style01