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 :

Cards MS

Exemple sur le site de Apple :

Cards Apple

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é.

🔧 Structure de base d’une carte¶

Une carte se compose généralement de :

card : le conteneur principal
card-body : le corps de la carte
card-title, .card-text : pour les titres et le texte
card-img-top ou .card-img-bottom : pour les images
card-footer : pour le pied de carte

Exemples simples¶

Carte simple avec texte¶

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Titre simple</h5>
    <p class="card-text">Voici une carte avec un titre et du texte.</p>
  </div>
</div>

Carte simple avec image¶

  <div class="card">
    <img class="card-img-top" src="img/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>
    </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>

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" role="button">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" role="button">See Profile</a>
        </div>
        <img class="card-img-bottom" src="img_avatar6.png" alt="Card image">
    </div>
</div>

Cards

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

Rubrique d'aide sur les cartes

Superposition de texte sur une carte¶

On utilise beaucoup les cartes pour avoir un bloc avec image qu'on place sous du contenu.

On appele cela les "card overlay" (superposition sur carte).

Comment ça fonctionne :

la carte est le contenant
l'image de la carte détermine la taille de la carte (ce n'est pas une image de fond, mais bien du contenu dans la carte)
un bloc en superposition (overlay) s'affiche par-dessus l'image
on ajoute le flex pour positionner un bloc enfant sur l'image

Exemple :

carte flexbox

HTML

<div class="card">
    <img class="card-img" src="img/imageCarte.jpg" alt="image de microsoft" >
    <div class="card-img-overlay d-flex flex-column justify-content-center">
        <div>
            <span class="px-2 fw-bold">Nouveau</span>
            <h3 class="fw-bolder">Surface Pro, Copilot+ PC</h3>
            <p>Donnez vie à des idées brillantes grâce à une flexibilité de nouvelle génération et une vitesse optimisée par l'IA.</p>
        </div>
    </div>
</div>