Le composant Card de Bootstrap est un conteneur flexible pouvant être utilisé pour présenter différents types de contenus de manière structurée. Il est idéal pour afficher des articles, des profils d'utilisateurs, des produits, et plus encore, en offrant des fonctionnalités intégrées pour organiser et présenter efficacement le contenu.

Fonctionnalités principales

• En-tête et pied de page : Les cartes peuvent comporter des sections d'en-tête et de pied de page pour fournir un contexte supplémentaire ou des actions liées au contenu ;
• Images : Les cartes prennent en charge l'inclusion d'images, permettant aux développeurs de présenter du contenu visuel en complément des informations textuelles ;
• Contenu textuel : Le contenu textuel tel que les titres, descriptions et informations supplémentaires peut être inclus dans le corps de la carte ;
• Boutons : Le composant card de Bootstrap permet l'intégration de boutons pour des actions telles que lire la suite, ajouter au panier ou aimer un contenu ;
• Variété de styles : Bootstrap propose différents styles et mises en page de cartes pour répondre à divers besoins de conception, y compris des cartes avec arrière-plans, bordures et ombres.

Classes d'utilisation

• card : Classe de base pour créer un conteneur de carte ;
• card-header : Ajoute un style pour une section d'en-tête dans la carte ;
• card-footer : Ajoute un style pour une section de pied de page dans la carte ;
• card-img-top : Place une image en haut de la carte ;
• card-body : Conteneur pour le contenu principal de la carte, tel que le texte et les boutons ;
• card-title : Applique un style au titre du contenu de la carte ;
• card-text : Applique un style au contenu textuel de la carte ;
• btn : Applique les styles de bouton Bootstrap aux boutons dans la carte ;
• btn-primary, btn-secondary, etc. : Appliquent des styles de couleur spécifiques aux boutons dans la carte.

Exemple 1 : Carte basique

Exemple 2 : Carte avec en-tête et pied de page

Exemple 3 : Carte avec image