Alertes Bootstrap 4 : afficher des messages clairs

Qu'est-ce qu'une alerte Bootstrap?

Les alertes Bootstrap 4 sont des composants pour afficher des messages importants aux utilisateurs : succès, erreur, avertissement ou information. Une seule classe CSS suffit à produire un rendu coloré et accessible.

Les différents types d'alertes

Bootstrap 4 fournit huit variantes : success, danger, warning, info, primary, secondary, light et dark.

<div class="alert alert-success" role="alert">Votre formulaire a été soumis avec succès !</div>
<div class="alert alert-danger"  role="alert">Une erreur s'est produite. Veuillez réessayer.</div>
<div class="alert alert-warning" role="alert">Attention : cette action est irréversible.</div>
<div class="alert alert-info"    role="alert">Conseil : remplissez tous les champs obligatoires.</div>
<div class="alert alert-primary" role="alert">Alerte avec la couleur primaire du thème.</div>
<div class="alert alert-secondary" role="alert">Alerte secondaire, plus discrète.</div>

Alertes fermables

Ajoutez .alert-dismissible et un bouton data-dismiss="alert" pour permettre à l'utilisateur de fermer l'alerte. Les classes .fade et .show ajoutent une animation douce.

<div class="alert alert-info alert-dismissible fade show" role="alert">
    <strong>Info !</strong> Ceci est une alerte que vous pouvez fermer.
    <button type="button" class="close" data-dismiss="alert" aria-label="Fermer">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

Alertes avec contenu riche

Une alerte peut contenir un titre (.alert-heading), des paragraphes, une liste d'erreurs, un séparateur <hr> et même un lien avec .alert-link.

<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <h4 class="alert-heading">Erreur de validation</h4>
    <ul class="mb-0">
        <li>L'email est invalide</li>
        <li>Le mot de passe doit contenir au moins 8 caractères</li>
    </ul>
    <hr>
    <p class="mb-0"><a href="#" class="alert-link">Besoin d'aide ?</a></p>
    <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
</div>

<div class="alert alert-warning" role="alert">
    Votre session expire dans 5 minutes.
    <a href="#" class="alert-link">Prolonger ma session</a>
</div>

Exemples pratiques

Voici comment déclencher dynamiquement des alertes via JavaScript selon le résultat d'une action utilisateur.

<button class="btn btn-primary" onclick="showAlert('success')">Simuler un succès</button>
<button class="btn btn-danger"  onclick="showAlert('error')">Simuler une erreur</button>

<div id="alertContainer"></div>

<script>
function showAlert(type) {
    var container = document.getElementById('alertContainer');
    var messages = {
        success: '<div class="alert alert-success alert-dismissible fade show">Opération réussie ! <button class="close" data-dismiss="alert"><span>&times;</span></button></div>',
        error:   '<div class="alert alert-danger alert-dismissible fade show">Une erreur est survenue. <button class="close" data-dismiss="alert"><span>&times;</span></button></div>'
    };
    container.innerHTML = messages[type];
}
</script>

Bonnes pratiques