4.2 — Badges & alertes

⏱️ TL;DR — Un badge (.badge) est une petite étiquette (compteur, statut) ; rounded-pill la rend ovale. Une alerte (.alert.alert-*) est un bloc de message contextuel, éventuellement fermable (alert-dismissible + bouton de fermeture, un peu de JS).

🎯 Objectifs

• Créer des badges et pastilles de notification.
• Afficher des alertes contextuelles, avec liens et fermeture.

Badges

<span class="badge text-bg-primary">Nouveau</span>
<span class="badge text-bg-success">Actif</span>
<span class="badge rounded-pill text-bg-danger">9</span>

text-bg-* (5.2+) gère à la fois le fond et la couleur de texte contrastée. Dans un titre :

<h4>Messages <span class="badge text-bg-secondary">4</span></h4>

Pastille de notification (voir aussi 2.6) :

<button class="btn btn-primary position-relative">
  Panier
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">3</span>
</button>

Alertes

<div class="alert alert-primary" role="alert">Une info bleue.</div>
<div class="alert alert-success" role="alert">Opération réussie !</div>
<div class="alert alert-warning" role="alert">Attention…</div>
<div class="alert alert-danger" role="alert">Une erreur est survenue.</div>

Les 8 couleurs contextuelles existent (primary, secondary, success, danger, warning, info, light, dark).

Avec titre et lien :

<div class="alert alert-info" role="alert">
  <h4 class="alert-heading">Bien joué !</h4>
  <p>Votre profil est complet.</p>
  <hr>
  <a href="#" class="alert-link">Voir le tableau de bord</a>
</div>

alert-link colore le lien assorti à l’alerte.

Alerte fermable

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  Message temporaire.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fermer"></button>
</div>

data-bs-dismiss="alert" (JS Bootstrap) ferme l’alerte ; fade show anime la disparition.

⚠️ Piège — role="alert" fait annoncer immédiatement le message par les lecteurs d’écran. Réservez-le aux messages importants ; pour un contenu statique, il est superflu.

💡 Pour un dev React — Une alerte fermable via data-bs-dismiss dépend du JS Bootstrap. En React, gérez plutôt la visibilité par l’état ({visible && <div className="alert…">}) ou utilisez <Alert dismissible> de react-bootstrap.

✏️ Exercices

1. Un badge de statut « En ligne » vert, en forme de pilule.

2. Une alerte de succès avec un titre et un lien assorti.

<div class="alert alert-success">
  <h4 class="alert-heading">Enregistré</h4>
  <a href="#" class="alert-link">Continuer</a>
</div>

🧠 Quiz de révision

Chapitre suivant : 4.3 — Cartes (cards)