Utiliser les Cards dans une Grille Bootstrap 5

Avantages d'utiliser des cards dans une grille Bootstrap

Les grilles Bootstrap te permettent de structurer des cards de manière claire et ordonnée, avec plusieurs avantages :

1. Responsive : Les grilles s’adaptent automatiquement à la taille de l’écran, offrant une expérience utilisateur optimale sur mobile, tablette ou ordinateur.
2. Facile à personnaliser : Tu peux ajuster le nombre de colonnes, l’espacement entre les éléments et bien plus, grâce aux classes comme row-cols-* et g-*.
3. Gain de temps : Le système préconçu de Bootstrap permet de créer des mises en page complexes avec peu de code.
4. Uniformité visuelle : Avec des classes comme h-100, toutes les cards peuvent avoir la même hauteur, même si leur contenu diffère.

Voici un exemple avec trois colonnes contenant des cards :

<div class="row">
  <div class="col">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Card 1</h5>
        <p class="card-text">Texte de la première card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Card 2</h5>
        <p class="card-text">Texte de la deuxième card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Card 3</h5>
        <p class="card-text">Texte de la troisième card.</p>
      </div>
    </div>
  </div>
</div>

Points importants :

• .row : Définit une ligne pour organiser les colonnes.
• .col : Crée des colonnes responsives. Elles prennent automatiquement la même largeur.
• Chaque colonne contient une card.

Ajouter des gouttières avec g-*

Les gouttières (ou gutters en anglais) sont des espaces entre les colonnes d'une grille Bootstrap. Elles permettent d'aérer la mise en page et d'améliorer la lisibilité. Les gouttières peuvent être ajustées avec les classes g-* ajoutée au div .row, où * est un chiffre indiquant la taille de l'espacement.

Exemple : Grille avec gouttières

<div class="row g-3">
  <div class="col">
    <div class="card">
      <!-- ... -->
    </div>
  </div>
  <div class="col">
    <div class="card">
      <!-- ... -->
    </div>
  </div>
</div>

Explications :

• g-3 : Ajoute un espacement uniforme de taille moyenne entre les colonnes et les lignes.
• Les valeurs possibles vont de g-0 (pas d'espace) à g-5 (espace maximal).

Utiliser des gouttières est une manière simple de rendre tes grilles plus lisibles et agréables visuellement.

Utiliser h-100 pour des cards de même hauteur

Quand les contenus des cards ont des tailles différentes, leur hauteur peut varier. La classe h-100 appliqué au div.card corrige cela en fixant la hauteur de toutes les cards d’une ligne.

Exemple avec h-100

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
        <!-- ... -->
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
        <!-- ... -->
    </div>
  </div>
</div>

Pourquoi utiliser h-100 ?

• Cela assure que toutes les cards d’une ligne ont la même hauteur.
• Cela donne un rendu visuel plus cohérent et professionnel.

Bonnes pratiques

1. Adapte tes grilles à l’écran : Utilise des classes comme row-cols-* pour organiser tes cards en fonction de la taille de l’écran.
2. Ajoute de l’espace : Les classes comme g-* permettent de rendre tes grilles plus lisibles.
3. Uniformise les hauteurs : Utilise h-100 pour éviter des décalages entre les cards.

Exercice

Niveau 1 : Grille simple

Crée une grille avec quatre cards en deux colonnes (à partir des écrans moyens) et ajoute un espacement entre les colonnes.

Niveau 2 : Grille améliorée

Ajoute des images à chaque card et applique h-100 pour que toutes aient la même hauteur.

À retenir

1. Les grilles Bootstrap t’aident à organiser ton contenu facilement.
2. Les classes comme row-cols-* et g-* rendent ta mise en page plus claire et adaptable.
3. La classe h-100 garantit des hauteurs uniformes pour un design soigné.

Amuse-toi bien avec Bootstrap ! 🙂