4.3 — Cartes (cards)

⏱️ TL;DR — La carte (.card) est le conteneur le plus polyvalent : un cadre avec card-header, card-body (card-title, card-text), card-footer, une card-img-top, des card-link. On les combine en grille ou en card-group pour des mises en page cohérentes.

🎯 Objectifs

• Structurer une carte complète.
• Ajouter image, en-tête, pied, liste et liens.
• Aligner des cartes de hauteur égale.

Anatomie

<div class="card" style="width: 18rem;">
  <img src="photo.jpg" class="card-img-top" alt="…">
  <div class="card-body">
    <h5 class="card-title">Titre</h5>
    <h6 class="card-subtitle mb-2 text-body-secondary">Sous-titre</h6>
    <p class="card-text">Un paragraphe de description.</p>
    <a href="#" class="card-link">Lien 1</a>
    <a href="#" class="card-link">Lien 2</a>
  </div>
</div>

En-tête et pied

<div class="card">
  <div class="card-header">En-tête</div>
  <div class="card-body">Contenu</div>
  <div class="card-footer text-body-secondary">Pied</div>
</div>

Carte + list group

<div class="card" style="width:18rem">
  <div class="card-header">Fonctionnalités</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Rapide</li>
    <li class="list-group-item">Sécurisé</li>
  </ul>
</div>

Cartes en grille (hauteur égale)

Combinez avec la grille et h-100 pour égaliser les hauteurs :

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">…</div>
  </div>
  <!-- répéter -->
</div>

h-100 sur .card fait que toutes les cartes d’une même rangée ont la même hauteur.

Habillage : couleurs, bordures

<div class="card text-bg-primary">…</div>          <!-- fond coloré -->
<div class="card border-success">…</div>           <!-- bordure colorée -->

Image de fond (overlay)

<div class="card text-bg-dark">
  <img src="fond.jpg" class="card-img" alt="…">
  <div class="card-img-overlay">
    <h5 class="card-title">Texte par-dessus</h5>
  </div>
</div>

⚠️ Piège — Sans h-100, deux cartes côte à côte avec des contenus de longueurs différentes ont des hauteurs différentes, ce qui casse l’alignement. h-100 (sur la carte, pas la colonne) résout ça avec la grille.

💡 Pour un dev React — La carte est le candidat parfait pour un composant React réutilisable <ProductCard> : vous mappez vos données et sortez le markup .card avec les bonnes classes. C’est un cas où Bootstrap et la composition React s’entendent très bien.

✏️ Exercices

1. Une grille de 3 cartes produit, hauteur égale, responsive (1/2/3 colonnes).

<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4">
  <div class="col"><div class="card h-100">…</div></div>
  <!-- ×3 -->
</div>

2. Une carte avec image en haut, titre, texte et un bouton d’action.

<div class="card">
  <img src="a.jpg" class="card-img-top" alt="…">
  <div class="card-body">
    <h5 class="card-title">Titre</h5>
    <p class="card-text">Texte.</p>
    <a href="#" class="btn btn-primary">Action</a>
  </div>
</div>

🧠 Quiz de révision

Chapitre suivant : 4.4 — List group