Cartes | smnarnold

Les cartes Bootstrap permettent, comme leur nom l'indique, de générer rapidement et facilement des cartes comme celle-ci:

CodePen | smnarnold 👀

Les cartes prennent la dimension de leur parent. Il est donc important de les inclure dans une colonne Bootstrap aillant la dimension souhaitée.

Image

Il est possible d'insérer une image dans une carte Bootstrap en ajoutant une balise <img> et en lui attribuant la classe .card-img-top ou .card-img-bottom afin d'indiquer où cette image doit afficher, soit en haut ou en bas de la carte.

Par exemple pour l'afficher en haut:

<div class="card">
  <img src="image.jpg" class="card-img-top">
</div>

Corps

Le corps de la carte contient son texte principal. Pour le définir, il suffit d'ajouter la classe .card-body à l'intérieur de la carte comme ceci:

<div class="card">
  <div class="card-body">Description</div>
</div>

Le corps définit un espace à l'intérieur de la carte empêchant sont contenu de toucher à l'image où aux bordures de celle-ci.

Titre

À l'intérieur du corps, il est possible d'ajouter un titre en utilisant la balise de titre adéquate et la classe .card-title comme suit:

<div class="card">
  <div class="card-body">
    <h3 class="card-title">Titre</h3>
    Description
  </div>
</div>

Entête et pied

L'entête et le pied d'une carte Bootstrap permettent de définir une zone séparée du reste de la carte afin de les mettre en évidence.

Pour définir de telles zones, il suffit d'ajouter des balises avec les classes .card-header ou .card-footer.

Par exemple pour une entête:

<div class="card">
  <div class="card-header">Entête</div>
</div>

CodePen | smnarnold 👀

Liste

Il est aussi possible d'inclure des listes en utilisant la composante de liste de Bootstrap .list-group et en y ajoutant le modificateur .list-group-flush.

Par exemple:

<div class="card">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Fait 1</li>
    <li class="list-group-item">Fait 2</li>
    <li class="list-group-item">Fait 3</li>
  </ul>
</div>

CodePen | smnarnold 👀

Horizontal

Il est possible de changer la direction verticale d'une carte à horizontale en insérant une nouvelle rangée Bootstrap à l'intérieur de celle-ci.

Par exemple:

<div class="card">
  <div class="row">
    <div class="col-5">
      <img src="image.jpg" class="img-fluid">
    </div>
    <div class="col-7">
      <div class="card-body">Description</div>
    </div>
  </div>
</div>

CodePen | smnarnold 👀

Cards