Les Cards dans Bootstrap 5

Qu’est-ce qu’une card ?

Une card est un conteneur flexible qui te permet d'afficher du contenu comme du texte, des images, des listes ou des boutons. Les cards sont très utilisées pour présenter des informations de manière claire et structurée.

Structure de base d’une card

Voici une card simple en HTML :

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Titre de la card</h5>
    <p class="card-text">Voici un exemple de texte dans une card.</p>
    <a href="#" class="btn btn-primary">En savoir plus</a>
  </div>
</div>

Cette structure contient :

• .card : la classe principale de la card.
• .card-body : le conteneur du contenu principal.
• .card-title et .card-text : les classes pour le titre et le texte.
• .btn : une classe pour le bouton d’action.

Ajouter des images aux cards

Les cards permettent d’intégrer des images de manière flexible, avec des options pour les placer en haut, en bas ou comme superposition sur le contenu.

Image en haut de la card

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image en haut">
  <div class="card-body">
    <h5 class="card-title">Card avec image en haut</h5>
    <p class="card-text">Cette card affiche une image en haut avec la classe `card-img-top`.</p>
  </div>
</div>

Image en bas de la card

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card avec image en bas</h5>
    <p class="card-text">Cette card affiche une image en bas avec la classe `card-img-bottom`.</p>
  </div>
  <img src="https://via.placeholder.com/150" class="card-img-bottom" alt="Image en bas">
</div>

Image en overlay (superposée)

<div class="card text-bg-dark">
  <img src="https://via.placeholder.com/350x150" class="card-img" alt="Image overlay">
  <div class="card-img-overlay">
    <h5 class="card-title">Card avec image overlay</h5>
    <p class="card-text">Le texte est superposé à l’image avec la classe `card-img-overlay`.</p>
  </div>
</div>

Ajouter des couleurs avec text-bg-*

Les classes text-bg-* permettent de personnaliser l’arrière-plan et la couleur du texte d’une card. Ces classes assurent une bonne lisibilité grâce à des combinaisons prédéfinies.

Exemple : Couleurs prédéfinies

<div class="card text-bg-primary mb-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card bleue</h5>
    <p class="card-text">Cette card utilise la classe `text-bg-primary` pour un fond bleu et un texte blanc.</p>
  </div>
</div>

<div class="card text-bg-success mb-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card verte</h5>
    <p class="card-text">La classe `text-bg-success` donne un fond vert et un texte blanc.</p>
  </div>
</div>

<div class="card text-bg-danger mb-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card rouge</h5>
    <p class="card-text">La classe `text-bg-danger` applique un fond rouge et un texte blanc.</p>
  </div>
</div>

Couleurs disponibles

• text-bg-primary : Bleu
• text-bg-secondary : Gris
• text-bg-success : Vert
• text-bg-danger : Rouge
• text-bg-warning : Jaune
• text-bg-info : Cyan
• text-bg-light : Blanc/gris clair
• text-bg-dark : Noir/gris foncé

Personnaliser les bordures avec border-*

Les classes border-* permettent de changer la couleur des bordures des cards. Cela ajoute une dimension visuelle supéplémentaire.

Exemple : Card avec bordures colorées

<div class="card border-primary mb-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card avec bordure bleue</h5>
    <p class="card-text">La classe `border-primary` colore la bordure en bleu.</p>
  </div>
</div>

<div class="card border-success mb-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card avec bordure verte</h5>
    <p class="card-text">La classe `border-success` applique une bordure verte.</p>
  </div>
</div>

<div class="card border-danger mb-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card avec bordure rouge</h5>
    <p class="card-text">La classe `border-danger` donne une bordure rouge.</p>
  </div>
</div>

Combiner couleurs et bordures

Tu peux utiliser les classes text-bg-* et border-* ensemble pour créer des cards élégantes et personnalisées.

Exemple : Card jaune avec bordure rouge

<div class="card text-bg-warning border-danger mb-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card jaune avec bordure rouge</h5>
    <p class="card-text">Une card qui combine `text-bg-warning` pour le fond et `border-danger` pour la bordure.</p>
  </div>
</div>

Bonnes pratiques

1. Choisis des couleurs cohérentes : Harmonise les couleurs des cards pour correspondre à la thématique de ton site.
2. Utilise des marges : Ajoute des espacements avec les classes comme mb-* pour aérer la disposition.
3. Teste les contrastes : Assure-toi que le texte reste lisible sur tous les arrière-plans.

Exercice

Niveau 1 : Création basique

Crée une page avec trois cards alignées verticalement. Chaque card doit :

• Avoir une couleur d’arrière-plan différente (text-bg-primary, text-bg-success, text-bg-danger).
• Inclure un titre, un texte et un bouton.

Niveau 2 : Personnalisation avancée

Améliore les cards :

• Ajoute une bordure colorée différente pour chaque card.
• Place une image en haut de chaque card avec la classe card-img-top.

À retenir

1. Une card est un conteneur pratique pour afficher du contenu de manière structurée.
2. Les classes text-bg-* ajoutent des couleurs d’arrière-plan et de texte.
3. Les classes border-* permettent de personnaliser les bordures.
4. Combine les deux pour créer des designs expressifs et professionnels.
5. Utilise les images avec card-img-top, card-img-bottom ou card-img-overlay pour enrichir visuellement tes cards.

Bonne pratique ! 🙂