Cartes

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

Caractéristiques Clés

• En-tête et Pied de page : Les cartes peuvent avoir 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 aux côtés d'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 de carte de Bootstrap permet l'intégration de boutons pour des actions telles que lire plus, ajouter au panier ou aimer le contenu ;
• Variété de Styles : Bootstrap propose divers styles et mises en page de cartes pour répondre à différents besoins de conception, y compris des cartes avec des arrière-plans, des bordures et des 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 : Style le titre du contenu de la carte ;
• card-text : Style le 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 de bouton spécifiques dans la carte.

Exemple 1 : Carte de base

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

Exemple 3 : Carte avec Image