4.1 — Boutons

⏱️ TL;DR — btn + une variante de couleur : btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-light, btn-dark, btn-link. Version contour : btn-outline-*. Tailles : btn-sm, btn-lg. États : disabled, active, pleine largeur w-100.

🎯 Objectifs

• Créer des boutons pleins et à contour.
• Régler tailles et états.
• Grouper des boutons.

Variantes

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>

Contour (outline)

<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-danger">Danger</button>

Idéal pour les actions secondaires : le bouton se remplit au survol.

Tailles et pleine largeur

<button class="btn btn-primary btn-lg">Grand</button>
<button class="btn btn-primary btn-sm">Petit</button>
<button class="btn btn-primary w-100">Pleine largeur</button>

États

<button class="btn btn-primary" disabled>Désactivé</button>
<a class="btn btn-primary disabled" aria-disabled="true">Lien désactivé</a>
<button class="btn btn-primary active" aria-pressed="true">Actif</button>

Sur une balise <a>, disabled n’existe pas nativement : utilisez la classe .disabled + aria-disabled="true".

Bouton = balise

btn fonctionne sur <button>, <a> et <input>. Choisissez la balise selon le rôle : <button> pour une action, <a> pour naviguer.

Bouton avec spinner (chargement)

<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
  <span role="status">Chargement…</span>
</button>

⚠️ Piège — Un <div class="btn"> cliquable n’est ni focusable ni annonçable par un lecteur d’écran. Utilisez une vraie balise <button> ou <a> pour l’accessibilité.

💡 Pour un dev React — Ces boutons sont du CSS pur : dans React, appliquez simplement className="btn btn-primary" sur votre <button onClick={…}>. Aucun JS Bootstrap requis pour un bouton (contrairement à un dropdown).

✏️ Exercices

1. Un bouton de suppression secondaire (contour) qui devient rouge plein au survol.

2. Un bouton « Enregistrer » pleine largeur, taille large.

🧠 Quiz de révision

Chapitre suivant : 4.2 — Badges & alertes