Chapitre 5 : Boutons/Alertes

1. Les Boutons

Utilisez la classe de base .btn combinée avec une classe de couleur.

Styles pleins

<button class="btn btn-primary">Bleu</button>
<button class="btn btn-success">Vert</button>

Styles contours (Outline)

<button class="btn btn-outline-danger">Contour rouge</button>

Tailles

<button class="btn btn-primary btn-lg">Grand</button>
<button class="btn btn-primary btn-sm">Petit</button>

2. Les Alertes

Parfaites pour afficher des messages de succès ou d'erreur.

<div class="alert alert-success" role="alert">
  Félicitations ! Votre profil a été mis à jour.
</div>

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  Attention ! Votre abonnement expire bientôt.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

Explication

Ce chapitre vous guide pas à pas sur le thème Composants : Boutons et Alertes. L'idée est de partir d'une approche simple, puis de progresser vers des usages plus réalistes.

Exemple pratique

Essayez d'appliquer la notion vue ici dans un mini-exemple de votre projet personnel. Ensuite, comparez votre résultat avec les exercices associés pour valider votre compréhension.