Bootstrap 5
Card
Image
Caption
Hover
Template
Html
Collection de 10 styles de cards Bootstrap 5 avec images et légendes : overlay, hover effects, badges, dégradés et designs responsive prêts à l'emploi.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Snippets Card Image Caption Bootstrap5 2026 05022041 | AngularForAll</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
<style>
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 2rem 0;
}
.section-title {
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
margin-bottom: 3rem;
}
/* Styles communs pour certaines cards */
.card-img-wrapper {
position: relative;
overflow: hidden;
}
.card {
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-10px);
}
</style>
</head>
<body>
<div class="container py-5">
<h1 class="text-center section-title display-4 fw-bold mb-2">
🎨 10 Styles de Cards Bootstrap
</h1>
<p class="text-center text-white-50 mb-5">Chaque carte a un design unique avec image et caption</p>
<div class="row g-4">
<!-- CARD 1 : Style Classique avec Overlay -->
<div class="col-lg-4 col-md-6">
<div class="card shadow-lg border-0 h-100" style="border-radius: 20px; overflow: hidden;">
<div class="card-img-wrapper" style="height: 250px;">
<img src="https://picsum.photos/600/400?random=1" class="w-100 h-100" style="object-fit: cover;" alt="Nature">
<div class="position-absolute bottom-0 start-0 w-100 p-3" style="background: linear-gradient(transparent, rgba(0,0,0,0.8));">
<span class="badge bg-success mb-2">Nature</span>
<h5 class="text-white mb-0">Forêt Mystique</h5>
</div>
</div>
<div class="card-body">
<p class="text-muted">Une vue imprenable sur une forêt enchantée avec des rayons de lumière traversant les arbres.</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted"><i class="bi bi-eye"></i> 2.3k vues</small>
<button class="btn btn-outline-success btn-sm rounded-pill">Explorer</button>
</div>
</div>
</div>
</div>
<!-- CARD 2 : Style Minimaliste avec Bordure Colorée -->
<div class="col-lg-4 col-md-6">
<div class="card shadow-sm h-100 border-0" style="border-radius: 16px; border-left: 5px solid #e74c3c !important;">
<div class="row g-0 align-items-center h-100">
<div class="col-5">
<img src="https://picsum.photos/300/400?random=2" class="img-fluid h-100" style="object-fit: cover; border-radius: 16px 0 0 16px;" alt="Montagne">
</div>
<div class="col-7">
<div class="card-body">
<span class="badge bg-danger mb-2">Aventure</span>
<h5 class="card-title fw-bold">Sommet Enneigé</h5>
<p class="card-text small text-muted">L'ascension vers les plus hauts sommets.</p>
<div class="d-flex align-items-center text-warning mb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
<small class="text-muted ms-1">4.5</small>
</div>
<button class="btn btn-danger btn-sm rounded-pill">
<i class="bi bi-arrow-right"></i> Découvrir
</button>
</div>
</div>
</div>
</div>
</div>
<!-- CARD 3 : Style Dark avec Effet Glass -->
<div class="col-lg-4 col-md-6">
<div class="card bg-dark text-white h-100 border-0 shadow-lg" style="border-radius: 20px; overflow: hidden;">
<img src="https://picsum.photos/600/400?random=3" class="card-img opacity-50" style="height: 200px; object-fit: cover;" alt="Ville">
<div class="card-img-overlay d-flex flex-column justify-content-end p-4">
<span class="badge bg-warning text-dark mb-2 align-self-start">Urbain</span>
<h4 class="card-title fw-bold">City Lights</h4>
<p class="card-text small opacity-75">Les lumières de la ville ne dorment jamais.</p>
<div class="d-flex gap-2">
<button class="btn btn-light btn-sm rounded-pill">
<i class="bi bi-heart"></i> 1.2k
</button>
<button class="btn btn-outline-light btn-sm rounded-pill">
<i class="bi bi-share"></i> Partager
</button>
</div>
</div>
</div>
</div>
<!-- CARD 4 : Style avec Effet Hover Complexe -->
<div class="col-lg-4 col-md-6">
<div class="card border-0 shadow h-100" style="border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<div class="position-relative" style="height: 220px;">
<img src="https://picsum.photos/600/400?random=4" class="w-100 h-100" style="object-fit: cover; transition: transform 0.5s;"
onmouseover="this.style.transform='scale(1.1)'"
onmouseout="this.style.transform='scale(1)'" alt="Fleurs">
<div class="position-absolute top-0 end-0 m-3">
<span class="badge bg-white text-dark fs-6"><i class="bi bi-heart-fill text-danger"></i></span>
</div>
</div>
<div class="card-body text-white">
<span class="badge bg-white text-dark mb-2">Floral</span>
<h5 class="card-title fw-bold">Jardin Secret</h5>
<p class="card-text small opacity-90">Un paradis floral caché au cœur de la nature sauvage.</p>
<div class="d-flex justify-content-between align-items-center">
<span class="fs-5 fw-bold">Gratuit</span>
<button class="btn btn-light rounded-pill btn-sm fw-bold">Visiter</button>
</div>
</div>
</div>
</div>
<!-- CARD 5 : Style avec Ribbon (Ruban) -->
<div class="col-lg-4 col-md-6">
<div class="card shadow-lg border-0 h-100 position-relative" style="border-radius: 20px; overflow: hidden;">
<div class="ribbon position-absolute" style="top: 20px; left: -30px; background: #ff6b6b; color: white; padding: 5px 40px; transform: rotate(-45deg); z-index: 10; font-weight: bold; font-size: 0.85rem; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
-30% OFF
</div>
<img src="https://picsum.photos/600/400?random=5" class="card-img-top" style="height: 220px; object-fit: cover;" alt="Océan">
<div class="card-body text-center">
<span class="badge bg-info mb-2">Marin</span>
<h5 class="card-title fw-bold">Océan Infini</h5>
<p class="text-muted small">Plongez dans les profondeurs marines.</p>
<div class="d-flex justify-content-center align-items-center gap-2 mb-3">
<span class="text-decoration-line-through text-muted">49.99€</span>
<span class="fs-4 fw-bold text-danger">34.99€</span>
</div>
<button class="btn btn-info text-white rounded-pill w-100">
<i class="bi bi-cart"></i> Acheter maintenant
</button>
</div>
</div>
</div>
<!-- CARD 6 : Style Horizontal avec Avatar -->
<div class="col-lg-4 col-md-6">
<div class="card shadow border-0 h-100" style="border-radius: 20px; background: #f8f9fa;">
<img src="https://picsum.photos/600/400?random=6" class="card-img-top" style="height: 180px; object-fit: cover; border-radius: 20px 20px 0 0;" alt="Cuisine">
<div class="card-body text-center">
<img src="https://i.pravatar.cc/80?img=1" class="rounded-circle border border-3 border-white shadow-sm mt-4"
style="width: 80px; height: 80px; object-fit: cover; margin-top: -60px;" alt="Avatar">
<span class="badge bg-warning text-dark mt-2">Gastronomie</span>
<h5 class="card-title fw-bold mt-2">Saveurs du Monde</h5>
<p class="text-muted small">Par Chef Marco • 15 recettes</p>
<div class="d-flex justify-content-center gap-3 mb-3">
<div class="text-center">
<h6 class="mb-0 fw-bold">328</h6>
<small class="text-muted">Recettes</small>
</div>
<div class="text-center">
<h6 class="mb-0 fw-bold">12.5k</h6>
<small class="text-muted">Abonnés</small>
</div>
<div class="text-center">
<h6 class="mb-0 fw-bold">4.8</h6>
<small class="text-muted">Note</small>
</div>
</div>
<button class="btn btn-outline-warning rounded-pill btn-sm">Suivre</button>
</div>
</div>
</div>
<!-- CARD 7 : Style avec Fond Dégradé et Icône -->
<div class="col-lg-4 col-md-6">
<div class="card border-0 shadow-lg h-100" style="border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
<div class="card-body text-center d-flex flex-column justify-content-center align-items-center p-5">
<div class="mb-4 p-4 bg-white rounded-circle shadow" style="width: 100px; height: 100px; display: flex; align-items: center; justify-content: center;">
<i class="bi bi-camera-fill display-4" style="background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"></i>
</div>
<span class="badge bg-primary mb-2">Photographie</span>
<h5 class="card-title fw-bold text-dark">Instant Capturé</h5>
<p class="text-muted small">Les plus beaux moments figés pour l'éternité.</p>
<img src="https://picsum.photos/300/200?random=7" class="rounded-3 w-100 mb-3 shadow-sm" style="height: 140px; object-fit: cover;" alt="Photo">
<button class="btn btn-dark rounded-pill">
<i class="bi bi-camera"></i> Voir la galerie
</button>
</div>
</div>
</div>
<!-- CARD 8 : Style avec Vidéo et Play Button -->
<div class="col-lg-4 col-md-6">
<div class="card shadow border-0 h-100" style="border-radius: 20px; overflow: hidden;">
<div class="position-relative" style="height: 250px;">
<img src="https://picsum.photos/600/400?random=8" class="w-100 h-100" style="object-fit: cover;" alt="Vidéo">
<div class="position-absolute top-50 start-50 translate-middle">
<div class="bg-white rounded-circle p-3 shadow-lg" style="width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.3s;"
onmouseover="this.style.transform='scale(1.2)'"
onmouseout="this.style.transform='scale(1)'">
<i class="bi bi-play-fill text-danger" style="font-size: 2rem;"></i>
</div>
</div>
<div class="position-absolute bottom-0 end-0 bg-dark text-white px-3 py-1 m-2 rounded-pill small">
<i class="bi bi-clock"></i> 12:45
</div>
</div>
<div class="card-body">
<span class="badge bg-danger mb-2">Vidéo</span>
<h5 class="card-title fw-bold">Aventure Extrême</h5>
<p class="text-muted small">Suivez cette incroyable expédition en haute montagne.</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted"><i class="bi bi-eye"></i> 45k vues</small>
<small class="text-muted"><i class="bi bi-clock"></i> Il y a 2 jours</small>
</div>
</div>
</div>
</div>
<!-- CARD 9 : Style Flip Card -->
<div class="col-lg-4 col-md-6">
<div class="card shadow border-0 h-100" style="border-radius: 20px; overflow: hidden; perspective: 1000px;">
<div class="flip-card-inner position-relative" style="transition: transform 0.6s; transform-style: preserve-3d; cursor: pointer;"
onmouseover="this.style.transform='rotateY(180deg)'"
onmouseout="this.style.transform='rotateY(0deg)'">
<!-- Face avant -->
<div class="flip-card-front" style="backface-visibility: hidden;">
<img src="https://picsum.photos/600/400?random=9" class="w-100" style="height: 350px; object-fit: cover;" alt="Art">
<div class="position-absolute bottom-0 start-0 w-100 p-3 text-white" style="background: linear-gradient(transparent, rgba(0,0,0,0.9));">
<span class="badge bg-purple mb-2">Art</span>
<h5 class="mb-0">Œuvre Mystérieuse</h5>
</div>
</div>
<!-- Face arrière -->
<div class="flip-card-back position-absolute top-0 start-0 w-100 h-100 p-4 d-flex flex-column justify-content-center align-items-center text-center text-white"
style="background: linear-gradient(135deg, #667eea, #764ba2); backface-visibility: hidden; transform: rotateY(180deg);">
<i class="bi bi-palette display-1 mb-3"></i>
<h4>Détails Secrets</h4>
<p class="small">Cette œuvre cache un message codé que seuls les initiés peuvent déchiffrer.</p>
<button class="btn btn-light rounded-pill">Révéler le secret</button>
</div>
</div>
</div>
</div>
<!-- CARD 10 : Style avec Carrousel Intégré -->
<div class="col-lg-4 col-md-6">
<div class="card shadow-lg border-0 h-100" style="border-radius: 20px; overflow: hidden;">
<div id="carouselCard10" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/600/400?random=10" class="d-block w-100" style="height: 220px; object-fit: cover;" alt="Slide 1">
<div class="carousel-caption d-block bg-dark bg-opacity-50 rounded-pill mx-5 mb-2">
<small>Destination Rêve</small>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/600/400?random=11" class="d-block w-100" style="height: 220px; object-fit: cover;" alt="Slide 2">
<div class="carousel-caption d-block bg-dark bg-opacity-50 rounded-pill mx-5 mb-2">
<small>Paradis Caché</small>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/600/400?random=12" class="d-block w-100" style="height: 220px; object-fit: cover;" alt="Slide 3">
<div class="carousel-caption d-block bg-dark bg-opacity-50 rounded-pill mx-5 mb-2">
<small>Vue Panoramique</small>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselCard10" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselCard10" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>
<div class="card-body">
<span class="badge bg-success mb-2">Voyage</span>
<h5 class="card-title fw-bold">Tour du Monde</h5>
<p class="text-muted small">Explorez les plus beaux endroits de la planète en un seul clic.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<i class="bi bi-geo-alt-fill text-danger"></i>
<small class="text-muted ms-1">12 destinations</small>
</div>
<button class="btn btn-success btn-sm rounded-pill">
<i class="bi bi-airplane"></i> Voyager
</button>
</div>
</div>
<div class="card-footer bg-white border-0 text-center">
<small class="text-muted">
<i class="bi bi-star-fill text-warning"></i> 4.9 •
<i class="bi bi-people"></i> 2.8k voyageurs
</small>
</div>
</div>
</div>
</div>
<!-- Légende -->
<div class="text-center mt-5">
<div class="d-inline-block bg-white bg-opacity-25 rounded-pill px-4 py-2">
<p class="text-white mb-0">
🎯 <strong>10 Styles :</strong>
Overlay | Minimaliste | Glass | Hover Complexe | Ribbon |
Avatar | Dégradé | Vidéo | Flip | Carrousel
</p>
</div>
</div>
</div>
<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Télécharger le fichier source