Les cartes n’ont pas de dimension intrinsèque, ce qui fait qu’elles tenteront d’occuper tout l’espace dans leur parent par défaut. Elles ne possèdent pas non plus de marges externes.
Structure d’une carte : header, body et footer
Pour définir une card, on va déjà devoir ajouter une classe .card à un élément conteneur comme un div par exemple.
On va ensuite pouvoir découper notre carte en trois parties distinctes : un en-tête avec la classe .card-header, un corps avec la classe .card-body et un pied avec la classe card-footer.
See the Pen
Bootstrap 6.2.1 by Pierre (@pierregiraud)
on CodePen.
Les éléments des cartes et les classes associées
On va pouvoir placer plus ou moins n’importe quel contenu HTML dans une carte : du texte, des images, les listes, des liens, etc. Pour que certains de ces éléments soient convenablement mis en forme, on va devoir leur ajouter des classes de type card-*.
On va ainsi pouvoir ajouter une classe .card-title aux éléments de titre et une classe .card-subtitle pour les sous titres. Les autres textes vont pouvoir être mis en forme avec la classe .card-text.
Pour les éléments de lien, on utilisera la classe .card-link.
Enfin, pour intégrer une image dans notre carte, on va pouvoir choisir entre les classes .card-img, .card-img-top et .card-img-bottom.
La classe .card-img va nous permettre d’ajouter une image qu’on va ensuite pouvoir utiliser comme overlay, c’est-à-dire en fond pour une certaine partie de la carte à laquelle on devra ajouter la classe .card-img-overlay.
Les classes .card-img-top et .card-img-bottom vont nous permettre de placer une image soit tout en haut d’une carte, soit tout en bas.
Notez qu’on placera l’image en premier ou dernier élément de la carte pour qu’elle occupe toute la place de celle-ci.
See the Pen
Bootstrap 6.2.2 by Pierre (@pierregiraud)
on CodePen.
Gérer la disposition de plusieurs cartes
Si on définit plusieurs cartes à la suite et qu’on souhaite que celles-ci soient alignées les unes par rapport aux autres et qu’elles soient de même taille, on peut utiliser l’une des classes .card-group ou .card-deck.
En utilisant .card-group, les cartes seront collées les unes aux autres. En utilisant .card-deck, les cartes seront séparées par des gouttières.
Code :
See the Pen
Bootstrap 6.2.3 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 6.2.3 by Pierre (@pierregiraud)
on CodePen.
Si on souhaite que nos cartes soient alignées en colonne, c’est-à-dire de haut en bas d’abord et de gauche à droite ensuite, on peut également utiliser la classe .card-columns.
Code :
See the Pen
Bootstrap 6.2.4 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 6.2.4 by Pierre (@pierregiraud)
on CodePen.
