Source

Cartes

Les cartes Bootstrap fournissent un conteneur de contenu flexible et extensible avec plusieurs variantes et options.

À propos de

Une carte est un conteneur de contenu flexible et extensible. Il comprend des options pour les en-têtes et les pieds de page, une grande variété de contenus, des couleurs d'arrière-plan contextuelles et de puissantes options d'affichage. Si vous connaissez Bootstrap 3, les cartes remplacent nos anciens panneaux, puits et vignettes. Des fonctionnalités similaires à ces composants sont disponibles en tant que classes de modificateurs pour les cartes.

Exemple

Les cartes sont construites avec le moins de balisage et de styles possible, mais parviennent toujours à offrir une tonne de contrôle et de personnalisation. Construits avec flexbox, ils offrent un alignement facile et se mélangent bien avec d'autres composants Bootstrap. Ils n'en ont pas marginpar défaut, utilisez donc les utilitaires d'espacement si nécessaire.

Vous trouverez ci-dessous un exemple de carte de base avec un contenu mixte et une largeur fixe. Les cartes n'ont pas de largeur fixe pour commencer, elles rempliront donc naturellement toute la largeur de son élément parent. Ceci est facilement personnalisable avec nos différentes options de dimensionnement .

Placeholder Image cap
Titre de la carte

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

Aller quelque part 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Types de contenu

Les cartes prennent en charge une grande variété de contenus, notamment des images, du texte, des groupes de listes, des liens, etc. Vous trouverez ci-dessous des exemples de ce qui est pris en charge.

Corps

Le bloc de construction d'une carte est le .card-body. Utilisez-le chaque fois que vous avez besoin d'une section rembourrée dans une carte.

Il s'agit d'un texte dans le corps d'une carte. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Titres, texte et liens

Les titres des cartes sont utilisés en les ajoutant .card-titleà une <h*>balise. De la même manière, les liens sont ajoutés et placés les uns à côté des autres en les ajoutant .card-linkà une <a>balise.

Les sous-titres sont utilisés en ajoutant un .card-subtitleà une <h*>balise. Si les .card-titleéléments et .card-subtitlesont placés dans un .card-bodyélément, le titre et le sous-titre de la carte sont bien alignés.

Titre de la carte
Sous-titre de la carte

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

Lien carte Autre lien 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Images

.card-img-topplace une image en haut de la carte. Avec .card-text, du texte peut être ajouté à la carte. Le texte à l'intérieur .card-textpeut également être stylisé avec les balises HTML standard.

Placeholder Image cap

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Liste des groupes

Créez des listes de contenu dans une carte avec un groupe de listes de vidage.

  • Cras justo odio
  • Dapibus ac facilisis à
  • Vestibule à eros
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
Mis en exergue
  • Cras justo odio
  • Dapibus ac facilisis à
  • Vestibule à eros
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Évier de cuisine

Mélangez et associez plusieurs types de contenu pour créer la carte dont vous avez besoin, ou jetez tout dedans. Vous trouverez ci-dessous des styles d'image, des blocs, des styles de texte et un groupe de listes, le tout regroupé dans une carte à largeur fixe.

Placeholder Image cap
Titre de la carte

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

  • Cras justo odio
  • Dapibus ac facilisis à
  • Vestibule à eros
Lien carte Autre lien 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Ajoutez un en-tête et/ou un pied de page facultatif dans une carte.

Mis en exergue
Traitement spécial du titre

Avec le texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire.

Aller quelque part 
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Les en-têtes de carte peuvent être stylisés en ajoutant .card-headerdes <h*>éléments.

Mis en exergue
Traitement spécial du titre

Avec le texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire.

Aller quelque part 
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Devis

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Quelqu'un de célèbre dans le titre de la source 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
Mis en exergue
Traitement spécial du titre

Avec le texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire.

Aller quelque part
il y a 2 jours 
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Dimensionnement

Les cartes ne supposent aucun détail widthpour commencer, elles seront donc larges de 100 %, sauf indication contraire. Vous pouvez modifier cela selon vos besoins avec des CSS personnalisés, des classes de grille, des mixins Sass de grille ou des utilitaires.

Utilisation du balisage de la grille

À l'aide de la grille, enveloppez les cartes en colonnes et en rangées au besoin.

Traitement spécial du titre

Avec le texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire.

Aller quelque part
Traitement spécial du titre

Avec le texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire.

Aller quelque part 
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Utilisation des utilitaires

Utilisez nos quelques utilitaires de dimensionnement disponibles pour définir rapidement la largeur d'une carte.

Titre de la carte

Avec le texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire.

Bouton
Titre de la carte

Avec le texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire.

Bouton 
<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

Utilisation de CSS personnalisés

Utilisez des CSS personnalisés dans vos feuilles de style ou en tant que styles en ligne pour définir une largeur.

Traitement spécial du titre

Avec le texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire.

Aller quelque part 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Alignement du texte

Vous pouvez modifier rapidement l'alignement du texte de n'importe quelle carte, dans son intégralité ou dans des parties spécifiques, grâce à nos classes d'alignement de texte .

Traitement spécial du titre

Avec le texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire.

Aller quelque part
Traitement spécial du titre

Avec le texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire.

Aller quelque part
Traitement spécial du titre

Avec le texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire.

Aller quelque part 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-right" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Ajoutez de la navigation à l'en-tête (ou au bloc) d'une carte avec les composants de navigation de Bootstrap .

Traitement spécial du titre

Avec le texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire.

Aller quelque part 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Traitement spécial du titre

Avec le texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire.

Aller quelque part 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Images

Les cartes incluent quelques options pour travailler avec des images. Choisissez d'ajouter des "capuchons d'image" à chaque extrémité d'une carte, de superposer des images avec le contenu de la carte ou simplement d'intégrer l'image dans une carte.

Casquettes d'image

Semblables aux en-têtes et aux pieds de page, les cartes peuvent inclure des « majuscules d'image » en haut et en bas, c'est-à-dire des images en haut ou en bas d'une carte.

Placeholder Image cap
Titre de la carte

Il s'agit d'une carte plus large avec un texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire. Ce contenu est un peu plus long.

Dernière mise à jour il y a 3 minutes

Titre de la carte

Il s'agit d'une carte plus large avec un texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire. Ce contenu est un peu plus long.

Dernière mise à jour il y a 3 minutes

Placeholder Image cap 
<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-top" alt="...">
</div>

Superpositions d'images

Transformez une image en arrière-plan de carte et superposez le texte de votre carte. Selon l'image, vous pouvez ou non avoir besoin de styles ou d'utilitaires supplémentaires.

Placeholder Card image
Titre de la carte

Il s'agit d'une carte plus large avec un texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire. Ce contenu est un peu plus long.

Dernière mise à jour il y a 3 minutes

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

Notez que le contenu ne doit pas être plus grand que la hauteur de l'image. Si le contenu est plus grand que l'image, le contenu sera affiché en dehors de l'image.

Horizontal

En utilisant une combinaison de classes de grille et d'utilitaires, les cartes peuvent être rendues horizontales d'une manière adaptée aux mobiles et réactive. Dans l'exemple ci-dessous, nous supprimons les gouttières de la grille avec .no-gutterset utilisons des .col-md-*classes pour rendre la carte horizontale au point d' mdarrêt. D'autres ajustements peuvent être nécessaires en fonction du contenu de votre carte.

Placeholder Image
Titre de la carte

Il s'agit d'une carte plus large avec un texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire. Ce contenu est un peu plus long.

Dernière mise à jour il y a 3 minutes

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Styles de cartes

Les cartes incluent diverses options pour personnaliser leurs arrière-plans, bordures et couleurs.

Fond et couleur

Utilisez les utilitaires de texte et d'arrière-plan pour modifier l'apparence d'une carte.

Entête
Titre de la carte principale

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

Entête
Titre de la carte secondaire

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

Entête
Titre de la carte de réussite

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

Entête
Titre de la carte Danger

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

Entête
Titre de la carte d'avertissement

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

Entête
Titre de la fiche d'information

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

Entête
Titre de la carte lumineuse

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

Entête
Titre de la carte noire

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
Donner du sens aux technologies d'assistance

L'utilisation de la couleur pour ajouter du sens ne fournit qu'une indication visuelle, qui ne sera pas transmise aux utilisateurs de technologies d'assistance, telles que les lecteurs d'écran. Assurez-vous que les informations désignées par la couleur sont soit évidentes à partir du contenu lui-même (par exemple, le texte visible), soit incluses par des moyens alternatifs, tels que du texte supplémentaire masqué avec la .sr-onlyclasse.

Frontière

Utilisez les utilitaires de bordure pour modifier uniquement le border-colord'une carte. Notez que vous pouvez mettre .text-{color}des classes sur le parent .cardou un sous-ensemble du contenu de la carte comme indiqué ci-dessous.

Entête
Titre de la carte principale

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

Entête
Titre de la carte secondaire

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

Entête
Titre de la carte de réussite

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

Entête
Titre de la carte Danger

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

Entête
Titre de la carte d'avertissement

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

Entête
Titre de la fiche d'information

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

Entête
Titre de la carte lumineuse

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

Entête
Titre de la carte noire

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-warning">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-info">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Utilitaires Mixins

Vous pouvez également modifier les bordures de l'en-tête et du pied de page de la carte selon vos besoins, et même les supprimer background-coloravec .bg-transparent.

Entête
Titre de la carte de réussite

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

Bas de page 
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

Disposition de la carte

En plus de styliser le contenu des cartes, Bootstrap inclut quelques options pour disposer des séries de cartes. Pour le moment, ces options de mise en page ne sont pas encore responsives .

Groupes de cartes

Utilisez des groupes de cartes pour afficher les cartes sous la forme d'un seul élément attaché avec des colonnes de largeur et de hauteur égales. Les groupes de cartes utilisent display: flex;pour obtenir leur dimensionnement uniforme.

Placeholder Image cap
Titre de la carte

Il s'agit d'une carte plus large avec un texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire. Ce contenu est un peu plus long.

Dernière mise à jour il y a 3 minutes

Placeholder Image cap
Titre de la carte

Cette carte est accompagnée d'un texte d'accompagnement ci-dessous comme introduction naturelle à du contenu supplémentaire.

Dernière mise à jour il y a 3 minutes

Placeholder Image cap
Titre de la carte

Il s'agit d'une carte plus large avec un texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire. Cette carte a un contenu encore plus long que la première pour montrer cette action de hauteur égale.

Dernière mise à jour il y a 3 minutes

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Lorsque vous utilisez des groupes de cartes avec des pieds de page, leur contenu s'alignera automatiquement.

Placeholder Image cap
Titre de la carte

Il s'agit d'une carte plus large avec un texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire. Ce contenu est un peu plus long.

Dernière mise à jour il y a 3 minutes
Placeholder Image cap
Titre de la carte

Cette carte est accompagnée d'un texte d'accompagnement ci-dessous comme introduction naturelle à du contenu supplémentaire.

Dernière mise à jour il y a 3 minutes
Placeholder Image cap
Titre de la carte

Il s'agit d'une carte plus large avec un texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire. Cette carte a un contenu encore plus long que la première pour montrer cette action de hauteur égale.

Dernière mise à jour il y a 3 minutes 
<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Jeux de cartes

Besoin d'un ensemble de cartes de largeur et de hauteur égales qui ne sont pas attachées les unes aux autres ? Utilisez des jeux de cartes.

Placeholder Image cap
Titre de la carte

Il s'agit d'une carte plus longue avec un texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire. Ce contenu est un peu plus long.

Dernière mise à jour il y a 3 minutes

Placeholder Image cap
Titre de la carte

Cette carte est accompagnée d'un texte d'accompagnement ci-dessous comme introduction naturelle à du contenu supplémentaire.

Dernière mise à jour il y a 3 minutes

Placeholder Image cap
Titre de la carte

Il s'agit d'une carte plus large avec un texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire. Cette carte a un contenu encore plus long que la première pour montrer cette action de hauteur égale.

Dernière mise à jour il y a 3 minutes

<div class="card-deck">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Tout comme avec les groupes de cartes, les pieds de page des cartes dans les decks s'aligneront automatiquement.

Placeholder Image cap
Titre de la carte

Il s'agit d'une carte plus large avec un texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire. Ce contenu est un peu plus long.

Dernière mise à jour il y a 3 minutes
Placeholder Image cap
Titre de la carte

Cette carte est accompagnée d'un texte d'accompagnement ci-dessous comme introduction naturelle à du contenu supplémentaire.

Dernière mise à jour il y a 3 minutes
Placeholder Image cap
Titre de la carte

Il s'agit d'une carte plus large avec un texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire. Cette carte a un contenu encore plus long que la première pour montrer cette action de hauteur égale.

Dernière mise à jour il y a 3 minutes 
<div class="card-deck">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Grille de cartes

Utilisez le système de grille Bootstrap et ses .row-colsclasses pour contrôler le nombre de colonnes de grille (enroulées autour de vos cartes) que vous affichez par ligne. Par exemple, voici la .row-cols-1disposition des cartes sur une colonne et .row-cols-md-2la division de quatre cartes de largeur égale sur plusieurs lignes, à partir du point d'arrêt moyen.

Placeholder Image cap
Titre de la carte

Il s'agit d'une carte plus longue avec un texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire. Ce contenu est un peu plus long.

Placeholder Image cap
Titre de la carte

Il s'agit d'une carte plus longue avec un texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire. Ce contenu est un peu plus long.

Placeholder Image cap
Titre de la carte

Il s'agit d'une carte plus longue avec un texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire.

Placeholder Image cap
Titre de la carte

Il s'agit d'une carte plus longue avec un texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire. Ce contenu est un peu plus long.

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Changez-le en .row-cols-3et vous verrez la quatrième enveloppe de carte.

Placeholder Image cap
Titre de la carte

Il s'agit d'une carte plus longue avec un texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire. Ce contenu est un peu plus long.

Placeholder Image cap
Titre de la carte

Il s'agit d'une carte plus longue avec un texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire. Ce contenu est un peu plus long.

Placeholder Image cap
Titre de la carte

Il s'agit d'une carte plus longue avec un texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire.

Placeholder Image cap
Titre de la carte

Il s'agit d'une carte plus longue avec un texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire. Ce contenu est un peu plus long.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Lorsque vous avez besoin d'une hauteur égale, ajoutez .h-100aux cartes. Si vous voulez des hauteurs égales par défaut, vous pouvez définir $card-height: 100%dans Sass.

Placeholder Image cap
Titre de la carte

Il s'agit d'une carte plus longue avec un texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire. Ce contenu est un peu plus long.

Placeholder Image cap
Titre de la carte

Ceci est une carte courte.

Placeholder Image cap
Titre de la carte

Il s'agit d'une carte plus longue avec un texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire.

Placeholder Image cap
Titre de la carte

Il s'agit d'une carte plus longue avec un texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire. Ce contenu est un peu plus long.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Colonnes de carte

Les cartes peuvent être organisées en colonnes de type maçonnerie avec juste CSS en les enveloppant dans .card-columns. Les cartes sont construites avec columndes propriétés CSS au lieu de flexbox pour un alignement plus facile. Les cartes sont classées de haut en bas et de gauche à droite.

La tête haute! Votre kilométrage avec les colonnes de carte peut varier. Pour éviter que les cartes ne traversent les colonnes, nous devons les définir display: inline-blockcar ce column-break-inside: avoidn'est pas encore une solution à l'épreuve des balles.

Placeholder Image cap
Titre de la carte qui se termine sur une nouvelle ligne

Il s'agit d'une carte plus longue avec un texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire. Ce contenu est un peu plus long.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Quelqu'un de célèbre dans le titre de la source
Placeholder Image cap
Titre de la carte

Cette carte est accompagnée d'un texte d'accompagnement ci-dessous comme introduction naturelle à du contenu supplémentaire.

Dernière mise à jour il y a 3 minutes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entier posuere erat.

Quelqu'un de célèbre dans le titre de la source
Titre de la carte

Cette carte a un titre régulier et un court paragraphe de texte en dessous.

Dernière mise à jour il y a 3 minutes

Placeholder Card image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Quelqu'un de célèbre dans le titre de la source
Titre de la carte

Il s'agit d'une autre carte avec le titre et le texte de support ci-dessous. Cette carte a du contenu supplémentaire pour la rendre légèrement plus grande dans l'ensemble.

Dernière mise à jour il y a 3 minutes

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer text-white">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Les colonnes de cartes peuvent également être étendues et personnalisées avec du code supplémentaire. Vous trouverez ci-dessous une extension de la .card-columnsclasse utilisant le même CSS que nous utilisons - les colonnes CSS - pour générer un ensemble de niveaux réactifs permettant de modifier le nombre de colonnes.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}