Bootstrap 4 : les alertes

Bootstrap 4 dispose d'une class .alert pour vous permettre d'afficher des messages d'alerte. En fonction de la situation, vous pouvez utiliser des class contextuelles. Il peut s'agir d'un message d'info, d'un message de succès par exemple suite à un envoi de formulaire ou encore un message d'erreur. Voilà ci-dessous les différents cas disponibles : 

Une alerte info
Une alerte primary
Une alerte secondary
Une alerte warning
Une alerte success
Une alerte danger
Une alerte dark
Une alerte light
<div class="alert alert-info">
    Une alerte info
</div>
<div class="alert alert-primary">
    Une alerte primary
</div>
<div class="alert alert-secondary">
    Une alerte secondary
</div>
<div class="alert alert-warning">
    Une alerte warning
</div>
<div class="alert alert-success">
    Une alerte success
</div>
<div class="alert alert-danger">
    Une alerte danger
</div>
<div class="alert alert-dark">
    Une alerte dark
</div>								
<div class="alert alert-light">
    Une alerte light
</div>

Vous avez aussi la possibilité de faire disparaître le message d'alerte en cliquant sur une sorte d'icône. Pour cela, il faudra utiliser sur le conteneur <div> la class .alert-dismissible et à l'intérieur un lien ou un bouton (idéalement un bouton) avec la class .close et l'attribut data-dismiss avec pour valeur alert. Pour l'icône sur laquelle cliquée, on peut juste utiliser le code html &times; qui fera apparaître une croix.

Une alerte primary
<div class="alert alert-primary alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    Une alerte primary
</div>

Il est également possible d'ajouter une animation quand le message disparaît au clic. Il faudra ajouter les deux class .fade et .show.

Une alerte primary avec disparition animée au clic
<div class="alert alert-primary alert-dismissible fade show">
    <button class="close" data-dismiss="alert">&times;</button>
    Une alerte primary avec disparition animée au clic
</div>

Nous pouvons accorder un style sympa aux liens que nous mettons dans un message d'alerte en utilisant la class .alert-link sur ces liens.

Une alerte info avec disparition animée au clic et un lien sympa
Une alerte primary avec disparition animée au clic et un lien sympa
Une alerte secondary avec disparition animée au clic et un lien sympa
Une alerte warning avec disparition animée au clic et un lien sympa
Une alerte success avec disparition animée au clic et un lien sympa
Une alerte danger avec disparition animée au clic et un lien sympa
Une alerte dark avec disparition animée au clic et un lien sympa
Une alerte light avec disparition animée au clic et un lien sympa
<div class="alert alert-info alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    Une alerte info avec disparition animée au clic et <a href="#" class="alert-link">un lien sympa</a>
</div>
<div class="alert alert-primary alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    Une alerte primary avec disparition animée au clic et <a href="#" class="alert-link">un lien sympa</a>
</div>
<div class="alert alert-secondary alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    Une alerte secondary avec disparition animée au clic et <a href="#" class="alert-link">un lien sympa</a>
</div>
<div class="alert alert-warning alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    Une alerte warning avec disparition animée au clic et <a href="#" class="alert-link">un lien sympa</a>
</div>
<div class="alert alert-success alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    Une alerte success avec disparition animée au clic et <a href="#" class="alert-link">un lien sympa</a>
</div>
<div class="alert alert-danger alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    Une alerte danger avec disparition animée au clic et <a href="#" class="alert-link">un lien sympa</a>
</div>
<div class="alert alert-dark alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    Une alerte dark avec disparition animée au clic et <a href="#" class="alert-link">un lien sympa</a>
</div>								
<div class="alert alert-light alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    Une alerte light avec disparition animée au clic et <a href="#" class="alert-link">un lien sympa</a>
</div>

 

Partager :
comments powered by Disqus

Suivez-moi sur Twitter

Copyright © 2010-2019 Lookman Design, tous droits réservés .