Bootstrap
Alert
Bouton
Ui
Html
Composant Bootstrap 4 d'alertes stylisées avec boutons d'action — succès, danger, avertissement et info.
<!doctype html>
<html lang="fr" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Bootstrap Alert 01 | AngularForAll</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" />
<style>@font-face{font-family:'Font Awesome 5 Free';font-display:swap;font-style:normal;font-weight:900;src:url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.woff2') format('woff2');}@font-face{font-family:'Font Awesome 5 Free';font-display:swap;font-style:normal;font-weight:400;src:url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-regular-400.woff2') format('woff2');}@font-face{font-family:'Font Awesome 5 Brands';font-display:swap;font-style:normal;font-weight:400;src:url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-brands-400.woff2') format('woff2');}</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<style>
.alert {
border: none;
border-radius: 10px;
padding: 1rem 1.5rem;
}
.alert-btn {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
padding: 5px 15px;
border-radius: 6px;
}
</style>
</head>
<body class="bg-light p-5">
<div class="container">
<h4 class="mb-4">Notifications Système</h4>
<!-- Success Alert -->
<div class="alert alert-success d-flex align-items-center justify-content-between shadow-sm" role="alert">
<div>
<i class="fas fa-check-circle mr-2"></i>
<strong>Succès !</strong>
Votre commande a été enregistrée avec succès.
</div>
<button class="btn btn-success alert-btn ml-3">Voir la facture</button>
</div>
<!-- Info Alert -->
<div class="alert alert-info d-flex align-items-center justify-content-between shadow-sm" role="alert">
<div>
<i class="fas fa-info-circle mr-2"></i>
<strong>Info :</strong>
Une nouvelle mise à jour est disponible pour vos modules.
</div>
<button class="btn btn-info alert-btn ml-3">Mettre à jour</button>
</div>
<!-- Primary Alert -->
<div class="alert alert-primary d-flex align-items-center justify-content-between shadow-sm" role="alert">
<div>
<i class="fas fa-star mr-2"></i>
<strong>Abonnement :</strong>
Votre plan Premium arrive à expiration dans 3 jours.
</div>
<button class="btn btn-primary alert-btn ml-3">Renouveler</button>
</div>
<!-- Warning Alert -->
<div class="alert alert-warning d-flex align-items-center justify-content-between shadow-sm" role="alert">
<div>
<i class="fas fa-exclamation-triangle mr-2"></i>
<strong>Attention :</strong>
Votre espace de stockage est presque plein (90%).
</div>
<button class="btn btn-warning alert-btn ml-3">Gérer</button>
</div>
<!-- Danger Alert -->
<div class="alert alert-danger d-flex align-items-center justify-content-between shadow-sm" role="alert">
<div>
<i class="fas fa-bug mr-2"></i>
<strong>Erreur :</strong>
Impossible de se connecter au serveur de support.
</div>
<button class="btn btn-danger alert-btn ml-3">Réessayer</button>
</div>
</div>
</body>
</html>
Télécharger le fichier source