Les cartes Bootstrap sont un outil essentiel pour organiser et présenter du contenu dans des projets web. Elles offrent une manière simple mais polyvalente de créer des mises en page visuellement attrayantes qui s’ajustent parfaitement à différents appareils. À la fin de cet article, vous saurez comment utiliser efficacement les composants de carte Bootstrap dans vos projets.
Pourquoi choisir Bootstrap ?
Bootstrap demeure l’un des frameworks les plus populaires pour construire des mises en page web réactives et orientées mobile. Ses principaux avantages incluent :
- Conception réactive rapide et facile : Vous n’avez besoin que de connaissances de base en HTML et CSS pour créer des mises en page époustouflantes.
- Approche mobile d’abord : Bootstrap privilégie la réactivité mobile dès le départ.
- Compatibilité des navigateurs : Il fonctionne parfaitement sur tous les principaux navigateurs.
- Système de grille alimenté par Flexbox : Simplifie les tâches d’alignement et d’espacement.
- Composants étendus : Une large gamme d’éléments réutilisables comme des boutons, des modales et des cartes.
La dernière version de Bootstrap introduit des améliorations significatives, telles que le support de Flexbox et le polyvalent composant de carte, qui remplace les anciens composants comme les panneaux et les miniatures.
Points clés à retenir
Les cartes Bootstrap sont des outils polyvalents pour créer des mises en page organisées et réactives. Elles vous permettent d’afficher divers types de contenus tels que du texte, des images et des éléments multimédias dans un conteneur élégant. Voici quelques caractéristiques clés qui les rendent indispensables pour les développeurs :
- Facilité d’utilisation : Vous pouvez rapidement créer une carte en combinant des éléments tels que div class= »card-body », qui définit la zone de contenu, et p class= »card-text », où réside l’information textuelle.
- Prise en charge de plusieurs types de contenus : Ajoutez un titre de carte, des images ou des groupes de listes pour structurer efficacement votre contenu.
- Réactivité : En utilisant la grille et les points de rupture de Bootstrap, les cartes peuvent s’adapter à n’importe quelle taille d’appareil, du mobile au bureau.
- Design personnalisable : Les classes utilitaires vous permettent de personnaliser l’apparence, y compris les couleurs, les bordures et l’alignement du texte.
- Mises en page avancées : Des fonctionnalités telles que les groupes de cartes, les decks et les mises en page en masonnerie permettent un alignement et une organisation sans couture.
Qu’est-ce que le composant de carte Bootstrap ?
Bootstrap introduit un composant d’interface utilisateur polyvalent et moderne appelé cartes, qui servent de conteneurs flexibles et élégants pour afficher divers types de contenus. Avec un style par défaut minimal, les cartes Bootstrap peuvent être facilement améliorées en utilisant sa large gamme de classes utilitaires.
Ce composant est construit sur la base de Flexbox, permettant un alignement et un espacement précis. Les développeurs peuvent utiliser les utilitaires d’espacement de Bootstrap pour contrôler efficacement les marges et le rembourrage.
Les cartes peuvent facilement accueillir différents types de contenu comme le titre, le sous-titre, le texte principal et les images, etc., ainsi que des sections d’en-tête et de pied de page facultatives. Vous pouvez également inclure différentes sections (blocs de carte) pour construire différents types de cartes selon votre utilisation.
Classes de cartes Bootstrap clés
Voici les principales classes utilitaires de cartes Bootstrap, accompagnées de leur objectif :
- card : La classe principale du conteneur qui définit le composant de la carte.
- card-body : Crée la zone de contenu principal à l’intérieur de la carte.
- card-title : Stylise le titre de la carte, généralement utilisé avec des balises d’en-tête comme <h5>.
- card-text : Utilisé pour le contenu textuel standard à l’intérieur de la carte.
- card-header : Ajoute une section d’en-tête stylisée en haut de la carte.
- card-footer : Ajoute une section de pied de page stylisée en bas de la carte.
- card-img-top : Place une image en haut de la carte.
- card-img-bottom : Place une image en bas de la carte.
- list-group : Crée un groupe de liste à l’intérieur de la carte.
- list-group-item : Stylise les éléments individuels dans le groupe de liste.
- card-group: Regroupe plusieurs cartes avec une largeur et une hauteur égales.
- card-deck: Aligne plusieurs cartes avec un espacement, obsolète dans Bootstrap 5.
- text-*: Classes utilitaires pour styliser la couleur du texte (par ex., text-primary, text-success).
- bg-*: Classes utilitaires pour styliser la couleur de fond (par ex., bg-light, bg-dark).
Ce bref aperçu répertorie les classes essentielles utilisées pour construire et personnaliser les cartes Bootstrap.
Comment inclure Bootstrap dans votre projet
Vous pouvez commencer à utiliser Bootstrap dans votre projet facilement en l’incluant depuis un réseau de diffusion de contenu (CDN) ou en téléchargeant les fichiers nécessaires depuis getbootstrap.com
Pour cet exemple, nous allons vous montrer comment configurer une page HTML simple en utilisant un CDN pour inclure le composant de carte Bootstrap. Cette méthode vous permet de créer et de styliser rapidement des cartes sans avoir besoin de configurations supplémentaires.
Suivez les étapes ci-dessous pour créer votre fichier index.html et inclure Bootstrap 5.3.3 :
<!doctype html>
<html lang="en">
<head>
<!-- Balises meta requises -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<title>Bootstrap Card Example</title>
</head>
<body>
<div class="container mt-5">
<div class="card" style="width: 18rem;">
<div class="card-header bg-primary text-white">
Example Card Header
</div>
<div class="card-body">
<h5 class="card-title">Example Card Title</h5>
<p class="card-text">This is an example card created using Bootstrap 5. It includes styling for the
header, title, and text.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<!-- Bundle Bootstrap avec Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>Nous avons inclus les fichiers Bootstrap via un CDN, garantissant que la dernière version du framework est toujours disponible. Une division de conteneur a été ajoutée pour servir de base à votre contenu, vous permettant de commencer à construire avec le composant carte Bootstrap immédiatement.
Pour plus de détails, vous pouvez explorer la documentation du modèle de démarrage.
Création de cartes Bootstrap de base
Pour créer une carte simple, suivez ces étapes :
- Utilisez la classe .card avec une balise <div> pour créer le conteneur extérieur.
- Ajoutez la classe .card-body à une balise intérieure <div> pour définir le corps de la carte.
- Utilisez les classes .card-title et .card-subtitle avec des balises d’en-tête (<h5> et <h6>) pour ajouter le titre et le sous-titre de la carte.
- Utilisez la classe .card-text avec des balises <p> pour inclure du contenu textuel.
- Utilisez la classe .card-img-top avec la balise <img> pour ajouter une image en haut de la carte.
Ce sont les éléments de base d’une mise en page de carte simple. Voici un exemple :
<div class="card" style="width: 30rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
<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">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Ce code génère une carte avec une image, un titre, un sous-titre, un texte et un bouton, et il s’ajustera à la largeur de son conteneur parent, sauf indication contraire à l’aide de la propriété style= »width: 30rem; ».
Ceci est une capture d’écran du résultat :
Cartes Horizontales dans Bootstrap
Les cartes horizontales vous permettent d’afficher du contenu dans une mise en page côte à côte, ce qui les rend idéales pour des designs compacts et organisés. Vous pouvez les créer en utilisant des classes de grille pour un comportement réactif, garantissant que la carte a fière allure sur tous les appareils.
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="https://picsum.photos/id/0/800" class="img-fluid rounded-start" alt="Image">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is a card with text beside an image, perfect for showcasing content
side-by-side.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>Ceci est une capture d’écran du résultat :
Groupes de Liste dans les Cartes Bootstrap
Bootstrap vous permet d’améliorer vos cartes en incluant des groupes de liste, facilitant ainsi l’affichage d’un contenu structuré et organisé. Les classes list-group et list-group-flush s’intègrent parfaitement dans les cartes, permettant aux développeurs de créer des listes visuellement attrayantes.
Voici comment vous pouvez créer une carte avec un groupe de liste flush :
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
Améliorer les Fonctionnalités des Cartes
Ajouter des En-têtes et des Pieds de Page
Vous pouvez améliorer vos cartes en incluant des en-têtes et des pieds de page avec les classes .card-header et .card-footer. Voici un exemple :
<div class="row">
<div class="col-sm-3">
<div class="card">
<div class="card-header">
This is a header
</div>
<img class="card-img-top" src="https://source.unsplash.com/daily" alt="Card image top">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<h4 class="card-subtitle">Card subtitle</h4>
<p class="card-text">This is a simple Card example</p>
</div>
<div class="card-footer">
This is a footer
</div>
</div>
</div>
</div> Ceci est la capture d’écran du résultat :
Cette mise en page ajoute plus de contexte à la carte avec un en-tête et un pied de page stylés.
Superposer du Texte sur des Images
Utilisez .card-img-overlay pour superposer du contenu sur l’image. En remplaçant simplement la classe card-body par la classe card-img-overlay, nous pouvons utiliser l’image comme superposition :
<div class="card" style="width: 30rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
<div class="card-img-overlay">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
<p class="card-text">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Ceci est une capture d’écran du résultat :
Ajouter des Images de Carte Caps
Ajoutez des images en haut ou en bas de la carte en utilisant .card-img-top ou .card-img-bottom.
<div class="card" style="width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<p class="card-text">This card has an image cap at both the top and bottom.</p>
</div>
<img src="https://picsum.photos/id/0/800" class="card-img-bottom" alt="Card image bottom">
</div>Voici une capture d’écran du résultat:
Les images en haut et en bas de la carte sont appelées image caps.
Conception adaptative avec les cartes Bootstrap
La conception adaptative garantit que vos cartes ont un bel aspect sur tous les appareils. Utilisez le système de grille Bootstrap pour contrôler la mise en page.
Exemple de code
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
<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">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/85/800" class="card-img-top" alt="Card image">
<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">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>Voici une capture d’écran du résultat:
Ajustement de la hauteur et de la largeur de la carte Bootstrap
Pour définir une largeur spécifique pour une carte, vous pouvez utiliser l’attribut style ou les classes utilitaires de Bootstrap. Voici un exemple:
<div class="card" style="width: 10rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is a simple card example with a custom width.</p>
</div>
</div>Voici une capture d’écran du résultat:
La largeur de cette carte est limitée à 10rem, ce qui peut être ajusté en fonction de vos besoins en matière de conception.
Généralement, la hauteur de la carte s’ajustera pour s’adapter verticalement au contenu de la carte, mais nous pouvons également la contrôler en utilisant du CSS personnalisé (par exemple, style= » height: 10rem; ») ou les utilitaires de dimensionnement de Bootstrap (par exemple, <div class= »card h-200″>).
Veuillez noter que la dernière version de Bootstrap a changé pour des unités rem au lieu d’unités px car rem est une unité de mesure évolutive — ce qui fonctionne mieux avec les paramètres de l’utilisateur, rendant le texte beaucoup plus accessible. Le résultat est que tous les éléments de la page s’ajusteront à la taille de l’écran.
Vous pouvez en savoir plus sur les nouvelles fonctionnalités de Bootstrap dans l’article de SitePoint “Bootstrap : Fonctionnalités super intelligentes pour vous séduire”.
Utiliser le système de grille pour contrôler la largeur
Une autre option pour contrôler la largeur du composant carte Bootstrap est d’utiliser la grille Bootstrap (lignes et colonnes) :
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is an example card using the grid system.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<h5 class="card-title">Another Card</h5>
<p class="card-text">This card sits next to the first one.</p>
</div>
</div>
</div>
</div>Ceci est une capture d’écran du résultat :
Dans cet exemple, deux cartes sont affichées côte à côte, chacune occupant quatre colonnes (col-md-4) sur des écrans moyens et plus grands.
Styles de carte
Bootstrap fournit diverses options pour personnaliser les cartes, y compris les couleurs de fond, les bordures et les styles de texte.
Couleurs de fond et de texte
Vous pouvez changer les couleurs de fond et de texte d’une carte en utilisant des classes utilitaires comme .bg-primary ou .text-white.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body">
<h5 class="card-title">Primary Card Title</h5>
<p class="card-text">Quick text to demonstrate card styling.</p>
</div>
</div>Couleurs des bordures
Utilisez les classes .border-{color} pour personnaliser la couleur de bordure de vos cartes. Le texte à l’intérieur de la carte peut également être stylé avec .text-{color}.
<div class="card border-success mb-3" style="max-width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body text-success">
<h5 class="card-title">Success Card Title</h5>
<p class="card-text">Simple content styled with a border.</p>
</div>
</div>En-têtes et pieds de page transparents
Retirez la couleur de fond des en-têtes et pieds de page en utilisant .bg-transparent et personnalisez leurs bordures.
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-info">Header</div>
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body text-info">
<h5 class="card-title">Info Card Title</h5>
<p class="card-text">Example content inside a card.</p>
</div>
<div class="card-footer bg-transparent border-info">Footer</div>
</div>Mix des arrière-plans et des bordures
Combinez les utilitaires d’arrière-plan et de bordure pour un style unique.
<div class="card bg-light border-dark mb-3" style="max-width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body text-dark">
<h5 class="card-title">Mixed Style Card</h5>
<p class="card-text">Custom card combining background and border.</p>
</div>
</div>Voici le résultat présentant quatre styles de carte différents dans une mise en page en une seule rangée:
Bootstrap vous permet de créer des cartes avec différents styles d’en-tête
- ‘header primary card title’ pour les sections principales
- ‘header light card title’ pour des designs subtils
- ‘header secondary card title’ pour une carte avec du texte de soutien.
- ‘header dark card title’ pour des looks audacieux
- ‘header success card title’ pour des messages positifs
- ‘header danger card title’ pour les avertissements.
Avec ces options de stylisme de carte polyvalentes, vous pouvez également créer des designs uniques comme « header warning card title », « header info card title » pour mettre en avant des informations critiques ou attirer l’attention sur des détails spécifiques de manière transparente.
Ajout de navigation
Une autre fonctionnalité intéressante du composant de carte Bootstrap est la possibilité d’ajouter des modèles de navigation avancés à la section d’en-tête tels que des onglets et des pilules de navigation.
Ajout d’onglets à l’en-tête de la carte
Pour inclure des onglets dans l’en-tête de la carte, utilisez les classes .nav-tabs et .card-header-tabs sur une liste non ordonnée (<ul>). Voici un exemple :
<div class="card" style="width: 30rem;">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab 2</a>
</li>
</ul>
</div>
<div class="card-body">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<h5 class="card-title pt-3">Card with Tabs</h5>
<p class="card-text">This card includes a tabbed navigation element in its header.</p>
</div>
</div>Ceci est la capture d’écran du résultat :
Ajout de Pilules à l’En-tête de la Carte
De la même manière, nous pouvons ajouter des pilules de navigation en remplaçant simplement .nav-tabs par .nav-pills et .card-header-tabs par .card-header-pill sur la balise de liste <ul> :
<div class="card" style="width: 30rem;">
<div class="card-header">
<ul class="nav nav-pills card-header-pill">
<li class="nav-item">
<a class="nav-link active" href="#">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab 2</a>
</li>
</ul>
</div>
<div class="card-body">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<h5 class="card-title pt-3">Card with Tabs</h5>
<p class="card-text">This card includes a pill-style navigation element in its header.</p>
</div>
</div>Ceci est la capture d’écran du résultat :
Vous pouvez trouver plus d’informations à ce sujet dans la documentation des composants de navigation Bootstrap
Ajout de Liens au Composant de Carte Bootstrap
Nous pouvons rapidement ajouter des liens à l’intérieur des cartes en utilisant la balise <a> avec une classe .card-link :
<div class="card">
<div class="card-body">
<h3 class="card-title">Adding Links</h3>
<p class="card-text">These are simple links</p>
<a href="#" class="card-link">Link 1</a>
<a href="#" class="card-link">Link 2</a>
</div>
<div class="card-footer">
This is a footer
</div>
</div>Ceci est la capture d’écran du résultat :
Aligner et Transformer le Texte dans les Composants de Carte Bootstrap
Bootstrap fournit des classes d’utilité textuelle pour aligner et transformer le texte au sein d’un composant de carte. Pour l’alignement du texte, vous pouvez utiliser les classes suivantes :
- .text-start pour l’alignement du texte de la carte à gauche
- .text-end pour l’alignement du texte de la carte à droite
- .text-center pour l’alignement du texte de la carte au centre
- .text-justify pour l’alignement justifié du texte de la carte (s’applique aux anciennes versions, obsolète dans Bootstrap 5)
- .text-nowrap pour empêcher le texte de se retourner
Vous pouvez également transformer le texte en utilisant les classes suivantes :
- .text-lowercase pour transformer le texte en minuscules
- .text-uppercase pour transformer le texte en majuscules
- .text-capitalize pour mettre en majuscule la première lettre de chaque mot
Personnalisation des couleurs d’arrière-plan, de premier plan et de bordure du composant de carte Bootstrap
Vous pouvez personnaliser l’arrière-plan, le texte et la bordure d’une carte Bootstrap en utilisant des classes utilitaires de texte et d’arrière-plan. Voici quelques exemples :
- Couleurs du texte : Utilisez .text-primary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark ou .text-white pour changer la couleur du texte.
- Couleurs d’arrière-plan : Utilisez .bg-primary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light, .bg-dark ou .bg-white pour changer la couleur d’arrière-plan.
- Couleurs de bordure : Utilisez .border-primary, .border-success, .border-danger, .border-warning, .border-info, .border-light, .border-dark ou .border-white pour styler la couleur de la bordure.
La démonstration CodePen ci-dessous montre tous les différents types de cartes que nous pouvons créer avec Bootstrap. N’hésitez pas à expérimenter par vous-même :
Création de mises en page avancées avec le composant de carte Bootstrap
La carte Bootstrap est un composant d’interface utilisateur polyvalent largement utilisé dans les mises en page web modernes pour afficher des types de contenus mixtes (comme du texte et des images) en tant qu’entité unique ou en collections regroupées.
Les cartes sont particulièrement utiles pour le design responsive et sont couramment mises en œuvre dans des mises en page comme la Mise en page en maçonnerie, également connue sous le nom de mise en page similaire à Pinterest.
Les cartes peuvent être utilisées pour créer des mises en page pour des galeries d’images, des articles de blog ou des produits de commerce électronique. Des plateformes majeures comme Google et Facebook exploitent largement les cartes pour organiser et afficher du contenu sur leurs applications web.
Auparavant, la création de telles mises en page avancées nécessitait une connaissance approfondie de CSS et HTML. Cependant, avec les dernières fonctionnalités de Bootstrap, les développeurs peuvent créer des mises en page basées sur des cartes, réactives et visuellement attrayantes sans effort.
Des classes comme .card-group, .card-deck et .card-columns simplifient le processus d’organisation des cartes avec un style et un alignement cohérents.
Regroupement/Nidification des cartes
Les groupes de cartes dans Bootstrap sont un moyen efficace d’afficher plusieurs composants de carte comme une seule entité attachée avec une largeur et une hauteur uniformes.
Cette mise en page est obtenue en utilisant la propriété display: flex;, garantissant que toutes les cartes s’alignent parfaitement. C’est particulièrement utile pour le design responsive et les mises en page web modernes où des dimensions de carte cohérentes sont essentielles.
Pour créer un groupe de cartes, utilisez la classe .card-group comme un div conteneur contenant des cartes individuelles.
Voici un exemple montrant un groupe de trois cartes :
<div class="card-group">
<div class="card text-white">
<img class="card-img-top" src="https://source.unsplash.com/featured/" alt="Card image top">
<div class="card-img-overlay">
<div class="card-group">
<div class="card text-white">
<img class="card-img-top" src="https://picsum.photos/id/475/800" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card Title 1</h3>
<h4 class="card-subtitle">Card Subtitle</h4>
<p class="card-text">This is an example of a grouped card.</p>
</div>
</div>
<div class="card text-white">
<img class="card-img-top" src="https://picsum.photos/id/58/800" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card Title 2</h3>
<h4 class="card-subtitle">Card Subtitle</h4>
<p class="card-text">Grouped cards ensure uniform styling.</p>
</div>
</div>
<div class="card text-white">
<img class="card-img-top" src="https://picsum.photos/id/75/800" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card Title 3</h3>
<h4 class="card-subtitle">Card Subtitle</h4>
<p class="card-text">They are responsive and visually appealing.</p>
</div>
</div>
</div>Ceci est une capture d’écran du résultat :
Comme on peut le voir, les trois cartes sont attachées et ont la même largeur et hauteur.
Jeux de cartes
Dans les anciennes versions de Bootstrap, .card-deck était utilisé pour créer des mises en page de cartes où les cartes avaient la même largeur et hauteur mais n’étaient pas attachées les unes aux autres. Cependant, dans Bootstrap 5, le système de grille est recommandé à cette fin. Cette approche offre une plus grande flexibilité et réactivité.
Pour obtenir une mise en page similaire, utilisez la classe .row avec .col pour contrôler l’espacement et l’alignement des cartes. Voici un exemple :
<div class="row row-cols-1 row-cols-md-3 g-4">
Comme on peut le voir, les cartes sont de la même taille avec un certain espacement entre elles.
Colonnes de cartes
Dans les anciennes versions de Bootstrap, la classe .card-columns était utilisée pour créer une mise en page de type maçonnerie où les cartes étaient ajoutées de haut en bas et de gauche à droite. Cependant, dans Bootstrap 5, cette fonctionnalité a été supprimée.
Pour obtenir une mise en page similaire, vous pouvez utiliser le système de grille en combinaison avec la mise en page CSS de type maçonnerie ou un plugin JavaScript comme Masonry.js pour des comportements plus complexes.
Voici comment créer une mise en page simple de style maçonnerie en utilisant le système de grille et CSS :
Optimisation des performances
Des performances efficaces sont cruciales pour créer des cartes Bootstrap qui se chargent rapidement et s’adaptent de manière transparente. Voici des techniques pratiques pour améliorer les performances tout en intégrant des composants de carte Bootstrap comme div class card body et h5 class card title.
Chargement différé des images
Le chargement paresseux retarde le chargement des images jusqu’à ce qu’elles soient visibles dans le viewport, optimisant ainsi la vitesse de la page. Utilisez l’attribut loading= »lazy » avec card img top pour une solution efficace.
<img src="https://picsum.photos/300/200" loading="lazy" class="card-img-top" alt="Lazy Loaded Image">Optimiser les tailles d’images
Redimensionnez les images pour qu’elles s’adaptent aux dimensions de leur conteneur, garantissant des temps de chargement plus rapides. Utilisez img-fluid avec div class card img pour redimensionner automatiquement les images.
<img src="https://picsum.photos/300/200" class="card-img-top img-fluid" alt="Resized Image">Cela garantit que le card img top s’adapte parfaitement, quelle que soit la largeur de l’élément parent.
Minifier CSS et JavaScript
Minifiez les styles et les scripts pour réduire la taille des fichiers. Combinez plusieurs éléments div class card header et minimisez le CSS personnalisé pour un rendu plus rapide.
Exemple optimisé
Au lieu d’appliquer des styles répétitifs ou personnalisés comme ceci :
<div class="card" style="border: 1px solid blue; text-align: center; padding: 20px;">
<div class="card-body">
<h5 style="font-size: 1.5rem; font-weight: bold;">Custom CSS Header</h5>
<p style="font-size: 1rem; color: #555;">This card uses inline styles, which are inefficient.</p>
</div>
</div>Utilisez les classes utilitaires de Bootstrap pour une structure plus propre et plus facile à maintenir :
<div class="card border-primary text-center p-3">
<div class="card-body">
<h5 class="card-title text-uppercase fw-bold">Utility Classes Header</h5>
<p class="card-text text-secondary">Using Bootstrap's utility classes ensures better performance and maintainability.</p>
</div>
</div>Utilisez des SVG pour les icônes
Les SVG sont légers et évolutifs, ce qui les rend idéaux pour les en-têtes de carte et les éléments décoratifs. Ils se chargent plus rapidement et conservent leur netteté sur tous les appareils.
Exemple
<div class="card text-center">
<div class="card-header bg-success text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="bi bi-check-circle" fill="currentColor">
<path d="M16 8.98l.686-.688L7.733.011 6.023 1.72 14.98 10.676z"/>
</svg>
<h5 class="card-title">SVG Optimized Header</h5>
</div>
<div class="card-body">
<p class="card-text">SVGs provide clear visuals with minimal overhead.</p>
</div>
</div>Précharger et préfetcher des ressources
Utilisez rel= »preload » pour charger les ressources critiques et rel= »prefetch » pour anticiper les besoins futurs. C’est particulièrement utile pour le contenu lourd des cartes.
Exemple
<link rel="preload" href="https://example.com/styles.css" as="style">
<link rel="prefetch" href="https://example.com/next-page.html">Réduire la complexité du DOM
Évitez les structures div class card trop imbriquées qui peuvent ralentir le rendu. Simplifiez les mises en page pour optimiser les performances.
Avant l’optimisation
<div class="card">
<div class="card-body">
<div>
<div>
<p>Nested Content</p>
</div>
</div>
</div>
</div>Après l’optimisation
<div class="card">
<div class="card-body">
<p class="card-text">Optimized Content</p>
</div>
</div>Optimiser les polices
Préchargez des polices personnalisées ou utilisez des polices système pour réduire la latence. Un div propre de la classe card-body peut encore mettre en valeur l’attrait visuel de vos cartes.
Exemple
<div class="card">
<div class="card-body" style="font-family: 'Roboto', sans-serif;">
<h5 class="card-title">Optimized Font</h5>
<p class="card-text">Preloading ensures faster rendering for card content.</p>
</div>
</div>Conclusion
Le composant de carte Bootstrap est un ajout puissant au framework Bootstrap, qui permet aux développeurs de créer des pages web de style moderne sans avoir à approfondir le fonctionnement du CSS. Vous pouvez ajouter des mises en page de carte pour représenter des galeries d’images, des widgets de tableau de bord et afficher des articles de blog ou des produits pour un site web de commerce électronique en ajoutant des classes CSS.
Grâce aux nouvelles fonctionnalités et composants, Bootstrap reste un puissant framework CSS disponible pour tous, en particulier pour les développeurs qui ont besoin de créer leurs propres mises en page réactives et de style moderne, mais qui manquent de temps et de budget ou de la connaissance approfondie du CSS nécessaire pour produire du code personnalisé.
Si vous maîtrisez les bases de Bootstrap mais vous vous demandez comment amener vos compétences Bootstrap au niveau supérieur, consultez notre Formation à la création de votre premier site web avec Bootstrap 4 pour une introduction rapide et amusante à la puissance de Bootstrap.
FAQ sur la maîtrise des composants de carte Bootstrap pour la conception réactive
Qu’est-ce qu’un composant de carte Bootstrap ?
Un composant de carte Bootstrap est un conteneur moderne et flexible pour le contenu, vous permettant de créer des mises en page visuellement attrayantes pour du texte, des images et du multimédia. Les cartes font partie du framework Bootstrap, conçu pour aider les développeurs à organiser les informations de manière responsive et adaptée aux mobiles.
Comment créer un composant de carte Bootstrap ?
Créer un composant de carte Bootstrap est simple. Vous pouvez utiliser une div avec la classe « card » comme conteneur et ajouter du contenu tel que des titres, du texte et des images à l’intérieur. Voici un exemple :
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is an example of a Bootstrap card body.</p>
</div>
</div>Comment définir la hauteur et la largeur de la carte en Bootstrap ?
Vous pouvez personnaliser la largeur et la hauteur d’une carte Bootstrap en utilisant des styles inline ou les classes utilitaires de Bootstrap. Par exemple :
<div class="card" style="width: 20rem; height: 15rem;">
<div class="card-body">
<h5 class="card-title">Custom Card</h5>
<p class="card-text">This card has a custom height and width.</p>
</div>
</div>Alternativement, vous pouvez également utiliser les classes utilitaires de hauteur de carte Bootstrap comme « w-50 » ou « h-100 » pour définir les dimensions de la carte de manière responsive.
Comment redimensionner une carte en Bootstrap ?
Pour redimensionner une carte, vous pouvez utiliser les classes utilitaires de taille de carte Bootstrap comme « w-25 », « w-50 » ou « w-75 » pour la largeur, et « h-auto » ou « h-100 » pour la hauteur. Cela garantit que votre carte s’adapte à la mise en page sans nécessiter de CSS supplémentaire. Voici un exemple :
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Responsive Card</h5>
<p class="card-text">This card resizes based on its parent container.</p>
</div>
</div>Comment créer un titre de carte en Bootstrap ?
Pour ajouter un titre à votre carte, utilisez un élément <h5> avec la classe « card-title ». Cette classe garantit que le titre est stylé de manière cohérente avec les normes de design de Bootstrap.
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is an example of a Bootstrap card with a title.</p>
</div>
</div>Comment utiliser la classe « card-body » en Bootstrap ?
La classe card-body est une classe utilitaire qui fournit un rembourrage et organise le contenu au sein d’une carte Bootstrap. C’est le conteneur principal du contenu d’une carte.
<div class="card">
<div class="card-body">
<h5 class="card-title">Using card-body</h5>
<p class="card-text">This is the content inside the card-body section.</p>
</div>
</div>Comment fixer la taille d’une carte Bootstrap ?
Pour fixer la taille d’une carte, appliquez une largeur et une hauteur spécifiques en utilisant des styles en ligne ou des classes utilitaires. Par exemple :
<div class="card" style="width: 250px; height: 300px;">
<img src="https://picsum.photos/250/150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Fixed Size Card</h5>
<p class="card-text">This card has a fixed size for consistency.</p>
</div>
</div>Comment ajuster la taille d’une carte dans Bootstrap ?
La taille de la carte peut être ajustée dynamiquement en utilisant les classes utilitaires de Bootstrap ou CSS Grid. Voici un exemple de dimensionnement réactif des cartes :
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Adjustable size based on parent grid.</p>
</div>
</div>
</div>
</div>Puis-je personnaliser les arrière-plans et les bordures des cartes Bootstrap ?
Oui, Bootstrap offre des classes utilitaires de personnalisation étendues. Utilisez bg-primary pour les couleurs d’arrière-plan et border-success pour le style des bordures. Exemple :
<div class="card bg-info border-danger">
<div class="card-body">
<h5 class="card-title">Custom Background</h5>
<p class="card-text">This card has a custom background and border.</p>
</div>
</div>Comment puis-je utiliser des images avec des cartes ?
Bootstrap prend en charge les images au sein des cartes en utilisant card-img-top ou card-img-bottom. Exemple :
<div class="card">
<img src="https://picsum.photos/300/200" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Card with Image</h5>
<p class="card-text">This card includes a top image.</p>
</div>
</div>Comment utiliser la classe div card body dans Bootstrap ?
La classe div card body dans Bootstrap définit la zone principale de contenu à l’intérieur d’une carte. Elle fournit un rembourrage et garantit un espacement cohérent pour le texte, les images et d’autres éléments au sein de la carte.
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is some text within a card body.</p>
</div>
</div>Qu’est-ce que la classe p card text dans Bootstrap ?
La classe p card text dans Bootstrap est utilisée pour styliser le contenu textuel à l’intérieur du corps de la carte. Elle applique des styles typographiques par défaut pour rendre le texte propre et professionnel.
<div class="card">
<div class="card-body">
<p class="card-text">This is an example of styled text inside a Bootstrap card.</p>
</div>
</div>Comment augmenter la taille d’une carte dans Bootstrap ?
Pour augmenter la taille de la carte, ajustez sa largeur et sa hauteur en utilisant w-100 pour une largeur complète ou spécifiez les dimensions en utilisant des styles. Exemple:
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Large Card</h5>
<p class="card-text">This card has an increased size for visibility.</p>
</div>
</div>Comment puis-je rendre les cartes de même hauteur ?
Utilisez .d-flex et .align-items-stretch:
<div class="row g-3">
<div class="col-md-4 d-flex">
<div class="card flex-fill">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Aligned with others.</p>
</div>
</div>
</div>Source:
https://www.sitepoint.com/bootstrap-card-component-introduction/