Cartes

2

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

Voir le CodePen de Simon Arnold (@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:

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

Voir le CodePen de Simon Arnold (@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>

Voir le CodePen de Simon Arnold (@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>

Voir le CodePen de Simon Arnold (@smnarnold).

Remarquez comment la class .card-img-top a été remplacée par .img-fluid afin de faire en sorte que l'image s'ajuste sur la largeur à sa colonne.

Pour en savoir plus, voir ce billet sur les cartes Bootstrap.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme