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 avec coins arrondis
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>

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

Cartes dans une grille¶

Pour créer un ensemble de cartes distribuées dans une grille, et ainsi créer des cartes uniformes en taille, 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 :

Placer 4 cartes sur une ligne en assurant que chaque colonne soit de la même taille.

<div class="row">
  <div class="col-3">
    <!--Créer une carte ici-->
  </div>
  <div class="col-3">
    <!--Créer une carte ici-->
  </div>
  <div class="col-3">
    <!--Créer une carte ici-->
  </div>
  <div class="col-3">
    <!--Créer une carte ici-->
  </div>
</div>

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>

Aide Bootstrap¶

Aide et exemples sur les cartes : https://getbootstrap.com/docs/6.0/components/card/