- Créer une card avec Bootstrap 4 : guide complet

Anatomie d'une card Bootstrap 4

La card Bootstrap 4 est le composant le plus polyvalent du framework. Elle remplace les composants panel, well et thumbnail de Bootstrap 3. Sa structure de base se compose de plusieurs sous-éléments optionnels.

Structure complète d'une card

<!-- Card complète avec tous les sous-éléments -->
<div class="card">
    <!-- En-tête optionnel -->
    <div class="card-header">
        En-tête de la card
    </div>

    <!-- Image en haut -->
    <img src="image.jpg" class="card-img-top" alt="Description de l'image">

    <!-- Corps principal (obligatoire pour le contenu) -->
    <div class="card-body">
        <h5 class="card-title">Titre de la card</h5>
        <h6 class="card-subtitle mb-2 text-muted">Sous-titre</h6>
        <p class="card-text">Contenu principal de la card avec du texte descriptif.</p>
        <a href="#" class="card-link">Lien 1</a>
        <a href="#" class="card-link">Lien 2</a>
        <a href="#" class="btn btn-primary">Bouton action</a>
    </div>

    <!-- Liste dans une card -->
    <ul class="list-group list-group-flush">
        <li class="list-group-item">Élément 1</li>
        <li class="list-group-item">Élément 2</li>
        <li class="list-group-item">Élément 3</li>
    </ul>

    <!-- Pied de page optionnel -->
    <div class="card-footer text-muted">
        Dernière mise à jour il y a 3 mins
    </div>
</div>

Tableau des classes principales

Cards avec images

Bootstrap 4 propose quatre positions d'image dans une card : en haut, en bas, en overlay (superposée) et une image couvrant toute la card.

Image en haut (card-img-top)

<!-- Image en haut avec contenu en dessous -->
<div class="card" style="width: 18rem;">
    <img src="photo.jpg" class="card-img-top" alt="Photo de présentation">
    <div class="card-body">
        <h5 class="card-title">Titre de l'article</h5>
        <p class="card-text">
            Courte description du contenu de la card. Idéal pour les articles de blog.
        </p>
        <a href="#" class="btn btn-primary">Lire la suite</a>
    </div>
</div>

Image en bas (card-img-bottom)

<!-- Contenu au-dessus de l'image -->
<div class="card">
    <div class="card-body">
        <h5 class="card-title">Résultat de l'analyse</h5>
        <p class="card-text">Les données montrent une progression de 23% ce mois-ci.</p>
    </div>
    <img src="chart.jpg" class="card-img-bottom" alt="Graphique d'analyse">
</div>

Image en overlay (card-img-overlay)

<!-- Texte superposé sur l'image - nécessite une image de fond sombre -->
<div class="card bg-dark text-white">
    <img src="landscape.jpg" class="card-img" alt="Paysage de montagne">
    <div class="card-img-overlay d-flex flex-column justify-content-end">
        <h5 class="card-title">Titre sur l'image</h5>
        <p class="card-text">Description visible sur le fond.</p>
        <p class="card-text"><small class="text-muted">Publié le 30 avril 2026</small></p>
    </div>
</div>

Card horizontale avec image à gauche

<!-- Card horizontale : image à gauche, texte à droite -->
<div class="card mb-3" style="max-width: 540px;">
    <div class="row no-gutters">
        <div class="col-md-4">
            <img src="thumbnail.jpg" class="card-img" alt="Miniature">
        </div>
        <div class="col-md-8">
            <div class="card-body">
                <h5 class="card-title">Card horizontale</h5>
                <p class="card-text">Layout idéal pour les listes d'articles ou de produits.</p>
                <p class="card-text">
                    <small class="text-muted">Mise à jour il y a 3 min</small>
                </p>
            </div>
        </div>
    </div>
</div>

Variantes de couleurs et styles

Bootstrap 4 propose des variantes de couleurs pour les cards via les classes utilitaires de fond et de texte, ainsi que des classes de bordure.

Cards colorées avec bg-* et text-*

<!-- Card bleue (primary) -->
<div class="card bg-primary text-white mb-3">
    <div class="card-header">Primary</div>
    <div class="card-body">
        <h5 class="card-title">Titre primary</h5>
        <p class="card-text">Card avec fond bleu Bootstrap.</p>
    </div>
</div>

<!-- Card verte (success) -->
<div class="card bg-success text-white mb-3">
    <div class="card-body">
        <h5 class="card-title">Opération réussie</h5>
        <p class="card-text">Votre fichier a été uploadé avec succès.</p>
    </div>
</div>

<!-- Card rouge (danger) -->
<div class="card bg-danger text-white mb-3">
    <div class="card-body">
        <h5 class="card-title">Erreur critique</h5>
        <p class="card-text">Une erreur est survenue lors du traitement.</p>
    </div>
</div>

Cards avec bordures colorées (border-*)

<!-- Card avec bordure colorée - fond blanc -->
<div class="card border-primary mb-3" style="max-width: 18rem;">
    <div class="card-header text-primary">En-tête coloré</div>
    <div class="card-body text-primary">
        <h5 class="card-title">Titre en primary</h5>
        <p class="card-text">Card avec bordure bleue et texte coloré.</p>
    </div>
</div>

<div class="card border-warning mb-3">
    <div class="card-body">
        <h5 class="card-title text-warning">⚠️ Avertissement</h5>
        <p class="card-text">Vérifiez vos paramètres avant de continuer.</p>
    </div>
</div>

Card groups, deck et columns

Bootstrap 4 propose trois mécanismes de mise en page pour les collections de cards : card-group, card-deck et card-columns.

card-group : hauteur égale, bords fusionnés

<!-- Les cards d'un group ont la même hauteur et leurs bords se touchent -->
<div class="card-group">
    <div class="card">
        <img src="img1.jpg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card 1</h5>
            <p class="card-text">Texte court.</p>
        </div>
        <div class="card-footer"><small class="text-muted">Hier</small></div>
    </div>
    <div class="card">
        <img src="img2.jpg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card 2</h5>
            <p class="card-text">Texte plus long pour voir l'alignement automatique des footers.</p>
        </div>
        <div class="card-footer"><small class="text-muted">Il y a 3 jours</small></div>
    </div>
    <div class="card">
        <img src="img3.jpg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card 3</h5>
            <p class="card-text">Texte.</p>
        </div>
        <div class="card-footer"><small class="text-muted">Il y a 5 jours</small></div>
    </div>
</div>

card-deck : espacement entre les cards

<!-- card-deck = même hauteur + gouttières entre les cards -->
<div class="card-deck">
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Fonctionnalité A</h5>
            <p class="card-text">Description de la fonctionnalité A.</p>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Fonctionnalité B</h5>
            <p class="card-text">Description plus longue de la fonctionnalité B avec beaucoup de détails.</p>
        </div>
    </div>
</div>

card-columns : disposition Masonry

<!-- card-columns = disposition en colonnes façon Masonry (Pinterest) -->
<div class="card-columns">
    <div class="card">
        <img src="img1.jpg" class="card-img-top" alt="...">
        <div class="card-body"><p class="card-text">Card courte.</p></div>
    </div>
    <div class="card p-3">
        <blockquote class="blockquote mb-0 card-body">
            <p>Citation longue qui prend plus de place.</p>
            <footer class="blockquote-footer">
                <small class="text-muted">Auteur</small>
            </footer>
        </blockquote>
    </div>
    <!-- D'autres cards... -->
</div>

Card overlay et effets hover

Les effets visuels sur les cards améliorent l'UX et rendent l'interface plus dynamique. CSS pur suffit pour la majorité des cas.

Effet hover avec élévation (box-shadow)

<!-- HTML -->
<div class="card card-hover">
    <img src="img.jpg" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Article populaire</h5>
        <p class="card-text">Survolez cette card pour voir l'effet d'élévation.</p>
    </div>
</div>

/* CSS - effet hover avec transition douce */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Variante avec zoom sur l'image */
.card-hover .card-img-top {
    transition: transform 0.3s ease;
    overflow: hidden;
}

.card-hover:hover .card-img-top {
    transform: scale(1.05);
}

Card avec overlay au hover

<!-- Card avec overlay visible au hover -->
<div class="card position-relative overflow-hidden">
    <img src="img.jpg" class="card-img" alt="Projet">
    <div class="card-img-overlay d-flex align-items-center justify-content-center card-overlay-content">
        <div class="text-center text-white">
            <h5>Voir le projet</h5>
            <a href="#" class="btn btn-outline-light">Détails</a>
        </div>
    </div>
</div>

/* Overlay caché par défaut, visible au hover */
.card-overlay-content {
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card:hover .card-overlay-content {
    opacity: 1;
}

Card de profil utilisateur

<!-- Card profil avec avatar centré -->
<div class="card text-center">
    <div class="card-header">
        Profil développeur
    </div>
    <div class="card-body">
        <img src="avatar.jpg"
             class="rounded-circle mb-3"
             width="80" height="80"
             alt="Avatar de l'utilisateur">
        <h5 class="card-title">Marie Dupont</h5>
        <p class="card-text text-muted">Senior Angular Developer</p>
        <p class="card-text">
            <span class="badge badge-primary">Angular</span>
            <span class="badge badge-secondary">TypeScript</span>
            <span class="badge badge-success">RxJS</span>
        </p>
        <a href="#" class="btn btn-primary">Voir le profil</a>
        <a href="#" class="btn btn-outline-secondary">Message</a>
    </div>
    <div class="card-footer text-muted">
        Membre depuis janvier 2020
    </div>
</div>

Cards responsives avec la grille

La combinaison du système de grille Bootstrap 4 avec les cards permet de créer des mises en page entièrement responsives.

Grille de cards 4 colonnes → 2 → 1

<!-- 4 colonnes sur desktop, 2 sur tablette, 1 sur mobile -->
<div class="row">
    <div class="col-xl-3 col-lg-4 col-sm-6 mb-4">
        <div class="card h-100">  <!-- h-100 = hauteur égale -->
            <img src="img1.jpg" class="card-img-top" alt="...">
            <div class="card-body d-flex flex-column">
                <h5 class="card-title">Article 1</h5>
                <p class="card-text flex-grow-1">Description courte.</p>
                <!-- Le bouton reste toujours en bas grâce à flex-grow-1 -->
                <a href="#" class="btn btn-primary mt-auto">Lire</a>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-lg-4 col-sm-6 mb-4">
        <div class="card h-100">
            <img src="img2.jpg" class="card-img-top" alt="...">
            <div class="card-body d-flex flex-column">
                <h5 class="card-title">Article 2</h5>
                <p class="card-text flex-grow-1">Description plus longue qui prend plus de place dans la card.</p>
                <a href="#" class="btn btn-primary mt-auto">Lire</a>
            </div>
        </div>
    </div>
</div>

Card featured (mise en avant)

<!-- Card large mise en avant avec col-12 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card flex-md-row">
            <img src="featured.jpg"
                 class="card-img-top d-md-none"
                 alt="Article featured">
            <img src="featured.jpg"
                 class="d-none d-md-block"
                 style="width: 350px; object-fit: cover;"
                 alt="Article featured">
            <div class="card-body">
                <span class="badge badge-primary mb-2">À la une</span>
                <h3 class="card-title">Guide complet Bootstrap 4</h3>
                <p class="card-text">Un guide exhaustif pour maîtriser Bootstrap 4 et créer des interfaces modernes.</p>
                <a href="#" class="btn btn-primary">Lire l'article</a>
            </div>
        </div>
    </div>
</div>

Cards avec composants Bootstrap

Les cards s'intègrent naturellement avec les autres composants Bootstrap : onglets, accordéons, listes, badges, et progress bars.

Card avec liste de navigation (onglets)

<!-- Card avec onglets intégrés dans l'en-tête -->
<div class="card">
    <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#tab1">Aperçu</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#tab2">Code</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#tab3">Docs</a>
            </li>
        </ul>
    </div>
    <div class="card-body tab-content">
        <div class="tab-pane fade show active" id="tab1">
            <h5 class="card-title">Aperçu du composant</h5>
            <p class="card-text">Le rendu final du composant.</p>
        </div>
        <div class="tab-pane fade" id="tab2">
            <pre><code>// Code source ici</code></pre>
        </div>
        <div class="tab-pane fade" id="tab3">
            <p>Documentation du composant.</p>
        </div>
    </div>
</div>

Card de statistiques avec progress bar

<!-- Card statistiques avec indicateurs visuels -->
<div class="card">
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="card-title mb-0">Performance mensuelle</h5>
            <span class="badge badge-success">+12%</span>
        </div>

        <div class="mb-3">
            <div class="d-flex justify-content-between">
                <span>Objectif ventes</span>
                <span>78%</span>
            </div>
            <div class="progress">
                <div class="progress-bar bg-success" style="width: 78%"></div>
            </div>
        </div>

        <div class="mb-3">
            <div class="d-flex justify-content-between">
                <span>Satisfaction client</span>
                <span>92%</span>
            </div>
            <div class="progress">
                <div class="progress-bar bg-info" style="width: 92%"></div>
            </div>
        </div>

        <div class="row text-center mt-3">
            <div class="col-4">
                <h4 class="text-primary">1,245</h4>
                <small class="text-muted">Ventes</small>
            </div>
            <div class="col-4">
                <h4 class="text-success">94%</h4>
                <small class="text-muted">Uptime</small>
            </div>
            <div class="col-4">
                <h4 class="text-warning">23</h4>
                <small class="text-muted">En attente</small>
            </div>
        </div>
    </div>
</div>

Bootstrap 4 vs 5 : différences sur les cards

Bootstrap 5 apporte plusieurs changements dans la syntaxe des cards. Si vous migrez un projet, voici les points de vigilance.

Équivalent Bootstrap 5 d'un card-deck

<!-- Bootstrap 5 : grille à la place de card-deck -->
<div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">
        <div class="card h-100">
            <img src="img1.jpg" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Card 1</h5>
                <p class="card-text">Texte.</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card h-100">
            <img src="img2.jpg" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Card 2</h5>
                <p class="card-text">Texte.</p>
            </div>
        </div>
    </div>
</div>

Patterns avancés et bonnes pratiques

Voici les patterns récurrents dans les projets réels : cards chargées dynamiquement, skeleton loading, et cartes de produits e-commerce.

Skeleton loader pour les cards (CSS pur)

<!-- Card skeleton - état de chargement -->
<div class="card skeleton-card">
    <div class="skeleton skeleton-img"></div>
    <div class="card-body">
        <div class="skeleton skeleton-title"></div>
        <div class="skeleton skeleton-text"></div>
        <div class="skeleton skeleton-text w-75"></div>
        <div class="skeleton skeleton-btn mt-3"></div>
    </div>
</div>

/* Animation skeleton */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.skeleton {
    background: linear-gradient(90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 2000px 100%;
    animation: shimmer 2s infinite;
    border-radius: 4px;
}

.skeleton-img { height: 200px; }
.skeleton-title { height: 20px; width: 60%; margin-bottom: 8px; }
.skeleton-text { height: 14px; margin-bottom: 6px; }
.skeleton-btn { height: 36px; width: 120px; }

Card produit e-commerce

<!-- Card produit complète -->
<div class="card product-card h-100">
    <div class="position-relative">
        <img src="product.jpg" class="card-img-top" alt="Nom du produit">
        <!-- Badge promo -->
        <span class="badge badge-danger position-absolute" style="top: 8px; right: 8px;">
            -20%
        </span>
    </div>
    <div class="card-body d-flex flex-column">
        <p class="text-muted small mb-1">Catégorie produit</p>
        <h5 class="card-title">Nom du produit</h5>
        <div class="d-flex align-items-center mb-2">
            <!-- Étoiles de notation -->
            <span class="text-warning">★★★★☆</span>
            <small class="text-muted ml-1">(42 avis)</small>
        </div>
        <div class="mt-auto">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <span class="h5 text-primary mb-0">39,99 €</span>
                    <small class="text-muted text-decoration-line-through ml-1">49,99 €</small>
                </div>
                <button class="btn btn-primary btn-sm">
                    Ajouter au panier
                </button>
            </div>
        </div>
    </div>
</div>

• Utilisez h-100 + flexbox pour aligner les boutons dans des grilles de cards
• Appliquez overflow-hidden sur la card pour contenir les images en zoom
• Préférez card-deck pour des collections de même hauteur visuelle
• Utilisez position-relative + position-absolute pour les badges promotionnels
• Implémentez un skeleton loader pour améliorer la perception de performance
• En Bootstrap 5, remplacez card-deck par row row-cols-* avec g-*
• Évitez les images sans taille fixe dans des card-groups : utilisez object-fit: cover
• Testez toujours la card avec du contenu très court ET très long

Conclusion

Les cards Bootstrap 4 sont extrêmement versatiles. Maîtriser les sous-éléments (card-body, card-header, card-img-top), les variantes de couleurs, et les mécanismes de mise en page (card-group, card-deck) permet de construire n'importe quel type d'interface : grilles de produits, profils utilisateurs, tableaux de bord, ou portfolios.

En migrant vers Bootstrap 5, les changements clés sont : la suppression de card-deck (remplacé par la grille), l'utilisation des gouttières g-*, et l'abandon de jQuery pour les composants interactifs.