Bootstrap 4 Cartes
Cartes
Une carte dans Bootstrap 4 est une boîte bordée avec un rembourrage autour de son contenu. Il comprend des options pour les en-têtes, les pieds de page, le contenu, les couleurs, etc.
Jean Doe
Un exemple de texte un exemple de texte. John Doe est architecte et ingénieur
Voir le profilCarte de base
Une carte de base est créée avec la .cardclasse, et le contenu à l'intérieur de la carte a une .card-bodyclasse :
Exemple
<div class="card">
<div class="card-body">Basic
card</div>
</div>
Si vous connaissez Bootstrap 3, les cartes remplacent les anciens panneaux, puits et vignettes.
En-tête et pied de page
La .card-headerclasse ajoute un titre à la carte et la .card-footerclasse ajoute un pied de page à la carte :
Exemple
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div
class="card-footer">Footer</div>
</div>
Cartes contextuelles
Pour ajouter une couleur de fond à la carte, utilisez les classes contextuelles ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darket .bg-light.
Exemple
Titres, texte et liens
Utilisez .card-titlepour ajouter des titres de carte à n'importe quel élément d'en-tête. La .card-textclasse est utilisée pour supprimer les marges inférieures d'un élément <p> s'il s'agit du dernier enfant (ou du seul) à l'intérieur de .card-body. La .card-linkclasse ajoute une couleur bleue à n'importe quel lien et un effet de survol.
Exemple
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p
class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#"
class="card-link">Another link</a>
</div>
</div>
Images de carte
Jean Doe
Un exemple de texte un exemple de texte. John Doe est architecte et ingénieur
Voir le profil
Ajoutez .card-img-topou .card-img-bottomà un
<img>pour placer l'image en haut ou en bas à l'intérieur de la carte. Notez que nous avons ajouté l'image à l'extérieur du .card-bodypour couvrir toute la largeur :
Exemple
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-body">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
Lien étiré
Ajoutez la .stretched-linkclasse à un lien à l'intérieur de la carte, et cela rendra toute la carte cliquable et survolable (la carte agira comme un lien):
Jean Doe
Un exemple de texte un exemple de texte. John Doe est architecte et ingénieur
Voir le profilExemple
<a href="#" class="btn btn-primary stretched-link">See Profile</a>
Superpositions d'images de carte
Transformez une image en arrière-plan de carte et utilisez- .card-img-overlay
la pour ajouter du texte au-dessus de l'image :
Exemple
<div class="card" style="width:500px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-img-overlay">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
Colonnes de carte
Du texte à l'intérieur de la première carte
Du texte à l'intérieur de la deuxième carte
Du texte à l'intérieur de la troisième carte
Du texte à l'intérieur de la quatrième carte
Du texte à l'intérieur de la cinquième carte
Du texte à l'intérieur de la sixième carte
La .card-columnsclasse crée une grille de cartes en forme de maçonnerie (comme pinterest). La mise en page s'ajustera automatiquement au fur et à mesure que vous insérez plus de cartes.
Remarque : Les cartes sont affichées verticalement sur de petits écrans (moins de 576 px) :
Exemple
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
<div
class="card bg-light">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fifth
card</p>
</div>
</div>
<div
class="card bg-info">
<div class="card-body
text-center">
<p class="card-text">Some text inside the sixth
card</p>
</div>
</div>
</div>
Jeu de cartes
Du texte à l'intérieur de la première carte
Un peu plus de texte pour augmenter la hauteur
Un peu plus de texte pour augmenter la hauteur
Un peu plus de texte pour augmenter la hauteur
Du texte à l'intérieur de la deuxième carte
Du texte à l'intérieur de la troisième carte
Du texte à l'intérieur de la quatrième carte
La .card-deckclasse crée une grille de cartes de même hauteur et largeur . La mise en page s'ajustera automatiquement au fur et à mesure que vous insérez plus de cartes.
Remarque : Les cartes sont affichées verticalement sur de petits écrans (moins de 576 px) :
Exemple
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>
Groupe de cartes
Du texte à l'intérieur de la première carte
Un peu plus de texte pour augmenter la hauteur
Un peu plus de texte pour augmenter la hauteur
Un peu plus de texte pour augmenter la hauteur
Du texte à l'intérieur de la deuxième carte
Du texte à l'intérieur de la troisième carte
Du texte à l'intérieur de la quatrième carte
La .card-groupclasse est similaire à .card-deck. La seule différence est que la .card-groupclasse supprime les marges gauche et droite entre chaque carte.
Remarque : Les cartes sont affichées verticalement sur de petits écrans (moins de 576 px), AVEC marge supérieure et inférieure :
Exemple
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>