Alert Bootstrap4 style02
<!DOCTYPE html>
<html>
<head>
<title>ALERT BOOTSTRAP4 STYLE02 | 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="ALERT BOOTSTRAP4 STYLE02">
<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="notif-msg">
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong><i class="fa fa-check"></i> Aththentification avec succéss.</strong>
</div>
<div class="alert alert-danger alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong><i class="fa fa-warning"></i> Le nom de l'utilisateur ou le mot de passe est incorrect.</strong>
</div>
<div class="alert alert-warning alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong><i class="fa fa-signal"></i> Vérifiez votre connexion.</strong>
</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>
</body>
</html>
.notif-msg{
position: fixed;
top: 0px;
right: 0px;
z-index: 999;
width: 40%;
}
.alert{
border-radius: 0px;
padding: 15px;
background-color: #fafafa;
border-left: 6px solid #fafafa;
margin-bottom: 10px;
-webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
}
.alert-danger{border-left: 6px solid #DC143C;color: #DC143C;}
.alert-warning{border-left: 6px solid #F4821F;color: #F4821F;}
.alert-success{border-left: 6px solid #33b35a;color: #33b35a;}
