Le Tutoriel de Bootstrap Card

Bootstrap Card
Card avec Image
Card avec le système grillage
Card Group (.card-group)
Card Deck (.card-deck)
Responsive .card-group, .card-deck
Card Columns (.card-columns)
Responsive .card-columns

1. Bootstrap Card

Un Card est containeur de contenu (content container) qui est structuré, flexible et extensible. Il peut contenir les options telles que header, footer, des couleurs d'arrière-plan contextuelles, .. À la base, la structure de la Card est similaire à :

Tous les composants (component) tels que .card-header, img.card-img*, .card-body, .list-group, .card-footer ne sont pas obligatoires.
Les composants .card-body, .list-group peuvent apparaître 0 ou plusieurs fois.
Les composants .card-header, .card-footer, img.card-img* peuvent apparaître 0 ou plusieurs fois.

Card (img.card-img-top + .card-body)

Ci-dessous l'exemple d'une Card simple, elle se compose de deux composants tels que img.card-img-top & .card-body :

simple-card-example

<h4 class="mb-4">Simple Card</h4>
<div class="card" style="width: 18rem;">
   <img class="card-img-top" src="../images/beach.png" 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>

Card (.card-body):

L'exemple d'une Card simple, comprend un .card-body :

card-subtitle-link-example

<h4 class="mb-4">Simple Card</h4>
<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>

Card (.card-header + .list-group)

card-list-group-example

<h4 class="mb-4">Card (.card-header + .list-group)</h4>
<div class="card" style="width: 18rem;">
   <div class="card-header">
      Food Menu:
   </div>
   <ul class="list-group list-group-flush">
      <li class="list-group-item">Banh My</li>
      <li class="list-group-item">Pho</li>
      <li class="list-group-item">Salad</li>
   </ul>
</div>

Card (.card-header + .card-footer)

card-header-footer-example

<h4 class="mb-4">Card (.card-header + .card-footer)</h4>

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

Un exemple complexe:

card-comple-example

<h4 class="mb-4">Card Complex Example</h4>

<div class="card" style="width: 18rem;">
   <img class="card-img-top" src="../images/beach.png" 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>

2. Card avec Image

Quelques classes sont construites par le Bootstrap pour que vous appliquiez l'image qui apparait dans la Card. Ces classes établissent une largeur de 100% pour l'image et arrondit (round) les angles de l'image. Spécifiquement, ci-dessous la définition de ces classes :

.card-img-top
.card-img-bottom
.card-img

.card-img-*

/* Code see in Bootstrap */

.card-img-top {
    width: 100%;
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
}

.card-img-bottom {
    width: 100%;
    border-bottom-right-radius: calc(.25rem - 1px);
    border-bottom-left-radius: calc(.25rem - 1px);
}

.card-img {
    width: 100%;
    border-radius: calc(.25rem - 1px);
}

card-img-top-bottom-example

<h4 class="mb-4">Card (.card-img-top .card-img-bottom)</h4>

<div class="card mb-3">
   <img class="card-img-top" src="../images/beach.png" 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>
   <img class="card-img" src="../images/beach2.png" alt="">
</div>

.card-img-overlap

Une des options utiles différentes de l'image que vous pouvez afficher le contenu du texe recoupements (overlap) les images, enregistrent l'espace de Card.

card-img-overlay-example

<h4 class="mb-4">Card (.card-img-overlay)</h4>

<div class="card mb-3">
   <img class="card-img" src="../images/beach.png" alt="">

   <div class="card-img-overlay">
      <h5 class="card-title text-light">Card title</h5>
      <p class="card-text text-light">
         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 text-light">
         Last updated 3 mins ago
      </p>
   </div>

</div>

.card-img-overlay

/* Code see in Bootstrap */
.card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.25rem;
}

3. Card avec le système grillage

Vous pouvez combiner la Card avec le système de grillage (Grid System) afin d'obtenir une Gallery jolie et compatible avec les appareils de différentes largeurs de l'écran.

card-with-grid-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Card</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class= "container-fluid">
         <h4>Complex Gallery</h4>
         <div class= "row d-inline-flex">
            <!-- Gallery Item 1 -->
            <div class ="col-6 col-sm-4 col-md-3 p-2">
               <div class="card h-100">
                  <img class="card-img-top" src="../images/animal1.png"/>
                  <h4 class="card-title text-center">Sheep</h4>
                  <p class="card-text text-center">Info..</p>
               </div>
            </div>
            <!-- Gallery Item 2 -->
            <div class ="col-6 col-sm-4 col-md-3 p-2">
               <div class="card h-100">
                  <img class="card-img-top" src="../images/animal2.png"/>
                  <h4 class="card-title text-center">Horse</h4>
               </div>
            </div>
            <!-- Gallery Item 3 -->
            <div class ="col-6 col-sm-4 col-md-3 p-2">
               <div class="card h-100">
                  <img class="card-img-top" src="../images/animal3.png"/>
                  <h4 class="card-title text-center">Duck</h4>
               </div>
            </div>
            <!-- Gallery Item 4 -->
            <div class ="col-6 col-sm-4 col-md-3 p-2">
               <div class="card h-100">
                  <img class="card-img-top" src="../images/animal4.png"/>
                  <h4 class="card-title text-center">Goat</h4>
               </div>
            </div>
            <!-- Gallery Item 5 -->
            <div class ="col-6 col-sm-4 col-md-3 p-2">
               <div class="card h-100">
                  <img class="card-img-top" src="../images/animal5.png"/>
                  <h4 class="card-title text-center">Chicken</h4>
               </div>
            </div>
            <!-- Gallery Item 6 -->
            <div class ="col-6 col-sm-4 col-md-3 p-2">
               <div class="card h-100">
                  <img class="card-img-top" src="../images/animal6.png"/>
                  <h4 class="card-title text-center">Cow</h4>
               </div>
            </div>
         </div>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

h-100 (?)
Le Tutoriel de Bootstrap Sizing Utility

4. Card Group (.card-group)

L'emballage les éléments ".card" dans un élément ".card-group" permet aux éléments ".card" d'avoir la même largeur et la hauteur. La raison est que ".card-group" utilise {display: flex}, et les éléments ".card" vont mettre étroitement (La distance = 0).

card-group-example

<h4 class="mb-4">Card Group (.card-group)</h4>

<div class="card-group">
   <div class="card">
      <img class="card-img-top" src="../images/picture.png" alt="Card image cap">
      <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 class="card-img-top" src="../images/picture.png" alt="Card image cap">
      <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 class="card-img-top" src="../images/picture.png" alt="Card image cap">
      <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>

Si tous les éléments ".card" dans Card-Group vont footer, les footer se seront alignés (line-up).

card-group-with-footers-example

<h4 class="mb-4">Card Group</h4>

<div class="card-group">
   <div class="card">
      <img class="card-img-top" src="../images/picture.png" 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 class="card-img-top" src="../images/picture.png" 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 class="card-img-top" src="../images/picture.png" 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>

5. Card Deck (.card-deck)

Si vous vouler avoir un ensemble de ".card" qui a la même largeur et la hauteur et est séparé, merci de les mettre dans l'élément ".card-deck". Remarque : le .card-deck fonctionne similairement à l'élément .card-group. La seule différence est que ses éléments enfants (.card) seront collés l'un et l'autre.

card-deck-example

<h4 class="mb-4">Card Deck (.card-deck)</h4>
<div class="card-deck">
   <div class="card">
      <img class="card-img-top" src="../images/picture.png" 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 class="card-img-top" src="../images/picture.png" 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 class="card-img-top" src="../images/picture.png" 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>

6. Responsive .card-group, .card-deck

En utilisant les classes .d-*-none, .d-*-block, .w-100 vous pouvez créer un Responsive Card Deck ou Responsive Card Group.

.d-*-none, .d-*-block, .w-100 (?)
Le Tutoriel de Bootstrap Display Utility
Le Tutoriel de Bootstrap Sizing Utility

card-deck-responsive-example

<h4 class="mb-4">Card Deck Responsive</h4>
<div class="card-deck">
   <div class="card mb-4">
      <div class="card-body">
         <h4 class="card-title">1 Card title</h4>
         <p class="card-text">Card Text..</p>
      </div>
   </div>
   <div class="card mb-4">
      <div class="card-body">
         <h4 class="card-title">2 Card title</h4>
         <p class="card-text">Card Text..</p>
      </div>
   </div>
   <div class="w-100 d-none d-sm-block d-md-none">
      <!-- wrap every 2 on sm-->
   </div>
   <div class="card mb-4">
      <div class="card-body">
         <h4 class="card-title">3 Card title</h4>
         <p class="card-text">Card Text..</p>
      </div>
   </div>
   <div class="w-100 d-none d-md-block d-lg-none">
      <!-- wrap every 3 on md-->
   </div>
   <div class="card mb-4">
      <div class="card-body">
         <h4 class="card-title">4 Card title</h4>
         <p class="card-text">Card Text..</p>
      </div>
   </div>
   <div class="w-100 d-none d-sm-block d-md-none">
      <!-- wrap every 2 on sm-->
   </div>
   <div class="w-100 d-none d-lg-block d-xl-none">
      <!-- wrap every 4 on lg-->
   </div>
   <div class="card mb-4">
      <div class="card-body">
         <h4 class="card-title">5 Card title</h4>
         <p class="card-text">Card Text..</p>
      </div>
   </div>
   <div class="w-100 d-none d-xl-block">
      <!-- wrap every 5 on xl-->
   </div>
   <div class="card mb-4">
      <div class="card-body">
         <h4 class="card-title">6 Card title</h4>
         <p class="card-text">Card Text..</p>
      </div>
   </div>
   <div class="w-100 d-none d-sm-block d-md-none">
      <!-- wrap every 2 on sm-->
   </div>
   <div class="w-100 d-none d-md-block d-lg-none">
      <!-- wrap every 3 on md-->
   </div>
   <div class="card mb-4">
      <div class="card-body">
         <h4 class="card-title">7 Card title</h4>
         <p class="card-text">Card Text..</p>
      </div>
   </div>
   <div class="card mb-4">
      <div class="card-body">
         <h4 class="card-title">8 Card title</h4>
         <p class="card-text">Card Text..</p>
      </div>
   </div>
   <div class="w-100 d-none d-sm-block d-md-none">
      <!-- wrap every 2 on sm-->
   </div>
   <div class="w-100 d-none d-lg-block d-xl-none">
      <!-- wrap every 4 on lg-->
   </div>
   <div class="card mb-4">
      <div class="card-body">
         <h4 class="card-title">9. Card title</h4>
         <p class="card-text">Card Text..</p>
      </div>
   </div>
   <div class="w-100 d-none d-md-block d-lg-none">
      <!-- wrap every 3 on md-->
   </div>
   <div class="card mb-4">
      <div class="card-body">
         <h4 class="card-title">10 Card title</h4>
         <p class="card-text">Card Text..</p>
      </div>
   </div>
</div>

7. Card Columns (.card-columns)

Si des ".card" sont mises dans un élément ".card-columns" elles seront disposés vers le bas, à gauche à droite et situés sur 3 colonnes comme dans l'illustration suivante. Il est à noter que la classe .card-columns est construite sur la base des CSS property à la place de Flexbox. Les éléments ".card" ont la même largeur mais leur hauteurs peuvent être variée. Vous pouvez personnaliser la quantité des colonnes selon la taille de l'écran, la quantité de colonne par défaut est 3.

card-columns-example

<h4 class="mb-4">Card Columns (.card-columns)</h4>
<div class="card-columns">
   <div class="card">
      <img class="card-img-top" src="../images/picture.png" 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 class="card-img-top" src="../images/picture.png" 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">
            <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 class="card-img" src="../images/beach.png" 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>

8. Responsive .card-columns

Supposons que vous voulez créer un Responsive .card-columns fonctionnant par les règles ci-dessous : Des éléments Card afficheront sur 5 colonnes si l'appareil est de taille xl, ou 4 colonnes si l'appareil a de taille lg, 3 colonnes si l'appareil a de taille md, 2 colonnes si l'appareil a de taille sm, 1 colonne si l'appareil a de taille Extra-Small.

Vous avez deux manière de le faire :

Utiliser SASS Mixin.
Utiliser CSS.

SASS mixin

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

CSS

@media (min-width: 576px) {
     .card-columns {
         column-count: 2;
    }
}
 @media (min-width: 768px) {
     .card-columns {
         column-count: 3;
    }
}
 @media (min-width: 992px) {
     .card-columns {
         column-count: 4;
    }
}
 @media (min-width: 1200px) {
     .card-columns {
         column-count: 5;
    }
}

card-columns-responsive-example

<h4 class="mb-4">Responsive .card-columns</h4>
<div class="card-columns">
   <div class="card">
      <div class="card-body">
         <h4 class="card-title">1 Card title</h4>
         <p class="card-text">Card Text..</p>
      </div>
   </div>
   <div class="card">
      <div class="card-body">
         <h4 class="card-title">2 Card title</h4>
      </div>
   </div>
   <div class="card">
      <div class="card-body">
         <h4 class="card-title">3 Card title</h4>
         <p class="card-text">Card Text..</p>
         <p class="card-text">Card Text..</p>
         <p class="card-text">Card Text..</p>
      </div>
   </div>
   <div class="card">
      <div class="card-body">
         <h4 class="card-title">4 Card title</h4>
         <p class="card-text">Card Text..</p>
      </div>
   </div>
   <div class="card">
      <div class="card-body">
         <h4 class="card-title">5 Card title</h4>
         <p class="card-text">Card Text..</p>
      </div>
   </div>
   <div class="card">
      <div class="card-body">
         <h4 class="card-title">6 Card title</h4>
         <p class="card-text">Card Text..</p>
      </div>
   </div>
   <div class="card">
      <div class="card-body">
         <h4 class="card-title">7 Card title</h4>
         <p class="card-text">Card Text..</p>
         <p class="card-text">Card Text..</p>
      </div>
   </div>
   <div class="card">
      <div class="card-body">
         <h4 class="card-title">8 Card title</h4>
         <p class="card-text">Card Text..</p>
      </div>
   </div>
   <div class="card">
      <div class="card-body">
         <h4 class="card-title">9. Card title</h4>
         <p class="card-text">Card Text..</p>
         <p class="card-text">Card Text..</p>
         <p class="card-text">Card Text..</p>
      </div>
   </div>
   <div class="card">
      <div class="card-body">
         <h4 class="card-title">10 Card title</h4>
         <p class="card-text">Card Text..</p>
      </div>
   </div>
</div>