Cartes en Bootstrap

Les cartes en Bootstrap sont des contenant extensibles pour une présentation sous forme de cartes de contenu.

Exemple sur le site de Microsoft :

Exemple sur le site de Apple :

Les cartes peuvent être très simples et seules sur une page, ou encore être très complexes et faire partie d'un ensemble de cartes.

Elles peuvent contenir beaucoup de contenu ou très peu et se limiter simplement à une image... bref, elles sont très versatiles!

Comme le système de grille, les cartes utilisent les flexbox pour offrir un éventail de possibilités d'alignement et de personnalisation.

Les cartes prennent 100% de la largeur de leur parent par défaut, mais cela peut facilement être ajusté avec différentes options de redimensionnement, notamment :

• les tailles de colonne du système de grille ;
• les tailles du système sizing utilities de Bootstrap ;
• du CSS personnalisé.

Étapes de création

On crée une carte en suivant les étapes données ici :

1. déclarer un contenant avec la classe card
2. optionnellement, ajouter une image avec card-img-top OU card-img-bottom
3. optionnellement, ajouter un en-tête avec card-header
4. optionnellement, déclarer le corps de la carte avec la classe card-body et ajouter le contenu voulu :
   • ajouter un titre avec card-title
   • ajouter du texte avec card-text
   • ajouter des liens avec card-link
   • ajouter des boutons avec les classes de bouton vues plus haut
   • ajouter des listes avec list-group
   • etc....
5. optionnellement, ajouter un pied avec card-footer

Exemple :

  <div class="card w-25">
    <img class="card-img-top" src="img_avatar1.png" alt="Card image">
    <div class="card-body">
      <h4 class="card-title">Monsieur X</h4>
      <p class="card-text">Voici une brève présentation de monsieur X. Il s'intéresse à la création d'interfaces web.</p>
      <a href="#" class="btn btn-primary stretched-link">Voir le profil</a>
    </div>
  </div>

Carte entièrement cliquable

Truc : rendre la totalité d'une carte cliquable

En ajoutant un lien cliquable dans une carte, on peut associer à cet élément la classe streched-link. Ceci fera en sorte que la totalité de la carte devienne cliquable et que le lien de destination soit celui associé au lien déclaré.

Cartes dans une grille

Pour créer un ensemble de cartes distribuées dans une grille, on utilise les notions de grille de Bootstrap et on y place les cartes dans les colonnes.

Il est ici intéressant d'utiliser les classes de positionnement des colonnes sur le parent row-cols-xx pour indiquer combien de cartes placer côte à côte sur différentes tailles d'écrans.

Exemple :

Afficher les cartes en une seule colonne par défaut, puis créer une grille de 2 cartes de large sur écrans moyens et plus grand :

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <!--Créer une carte ici-->
  </div>
  <div class="col">
    <!--Créer une carte ici-->
  </div>
  <div class="col">
    <!--Créer une carte ici-->
  </div>
  <div class="col">
    <!--Créer une carte ici-->
  </div>
</div>

Ceci donne le même résultat que :

<div class="row g-4">
  <div class="col-12 col-md-6">
    <!--Créer une carte ici-->
  </div>
  <div class="col-12 col-md-6">
    <!--Créer une carte ici-->
  </div>
  <div class="col-12 col-md-6">
    <!--Créer une carte ici-->
  </div>
  <div class="col-12 col-md-6">
    <!--Créer une carte ici-->
  </div>
</div>

Groupe de carte (card-group)

Exemple d'un groupe de cartes :

<div class="card-group">
    <div class="card">
        <img class="card-img-top" src="img_avatar1.png" alt="Card image">
        <div class="card-body">
          <h4 class="card-title">Monsieur X</h4>
          <p class="card-text">Voici une brève présentation de monsieur X. Il s'intéresse à la création d'interfaces web.</p>
          <a href="#" class="btn btn-primary">Voir le profil</a>
        </div>
    </div>


    <div class="card">
        <div class="card-body">
            <h4 class="card-title">Madame Y</h4>
            <p class="card-text">Voici une brève présentation de madame Y. Elle s'intéresse à l'installation et le fonctionnement d'ordinateurs.</p>
            <a href="#" class="btn btn-primary">See Profile</a>
        </div>
        <img class="card-img-bottom" src="img_avatar6.png" alt="Card image">
    </div>
</div>

Pour plusieurs exemples et d'autres possibilités et classes associées aux cartes :

Rubrique d'aide sur les cartes