Bootstrap 5
Product Card
Glassmorphism
Ecommerce
Modern Design
Carte produit moderne avec badge de promotion, sélecteur de couleur et effet glassmorphism. Parfait pour les boutiques en ligne.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Snippet Product Bootstrap 5 2026 042143 | AngularForAll</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-light">
<div class="container py-5">
<nav aria-label="breadcrumb" class="mb-4">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#" class="text-decoration-none">Accueil</a></li>
<li class="breadcrumb-item"><a href="#" class="text-decoration-none">Produits</a></li>
<li class="breadcrumb-item active" aria-current="page">Produit Premium</li>
</ol>
</nav>
<div class="row g-4">
<!-- Image Gallery -->
<div class="col-md-6">
<div class="card border-0 shadow-sm">
<img src="public/mobile.png"
class="card-img-top rounded-3" alt="Produit principal">
<div class="card-body">
<div class="row g-2">
<div class="col-3">
<img src="public/mobile.png"
class="img-fluid rounded-3 cursor-pointer" alt="Vue 1">
</div>
<div class="col-3">
<img src="public/mobile1.png"
class="img-fluid rounded-3" alt="Vue 2">
</div>
<div class="col-3">
<img src="public/mobile2.png"
class="img-fluid rounded-3" alt="Vue 3">
</div>
<div class="col-3">
<img src="public/mobile3.png"
class="img-fluid rounded-3" alt="Vue 4">
</div>
</div>
</div>
</div>
</div>
<!-- Product Details -->
<div class="col-md-6">
<div class="card border-0 shadow-sm">
<div class="card-body">
<div class="mb-3">
<span class="badge bg-danger mb-2">Nouveau</span>
<h1 class="h2 mb-2">Produit Premium Deluxe</h1>
<div class="mb-2">
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star-half-alt text-warning"></i>
<span class="text-muted ms-2">(128 avis)</span>
</div>
</div>
<div class="mb-3">
<span class="h3 text-primary">299,99 €</span>
<span class="text-muted ms-2"><s>399,99 €</s></span>
<span class="badge bg-success ms-2">-25%</span>
</div>
<p class="text-muted mb-3">
Découvrez notre produit premium avec des fonctionnalités avancées et une qualité exceptionnelle.
Parfait pour les professionnels exigeants.
</p>
<div class="mb-3">
<h6 class="fw-bold">Caractéristiques :</h6>
<ul class="list-unstyled">
<li><i class="fas fa-check-circle text-success me-2"></i> Matériaux de haute qualité</li>
<li><i class="fas fa-check-circle text-success me-2"></i> Garantie 5 ans</li>
<li><i class="fas fa-check-circle text-success me-2"></i> Livraison gratuite</li>
<li><i class="fas fa-check-circle text-success me-2"></i> Support technique 24/7</li>
</ul>
</div>
<div class="mb-3">
<label class="form-label fw-bold">Quantité :</label>
<div class="input-group w-50">
<button class="btn btn-outline-secondary" type="button">-</button>
<input type="number" class="form-control text-center"
value="1" min="1" max="10" aria-label="Quantité" required>
<button class="btn btn-outline-secondary" type="button">+</button>
</div>
</div>
<div class="d-flex gap-2">
<button class="btn btn-primary flex-grow-1">
<i class="fas fa-shopping-cart me-2"></i>Ajouter au panier
</button>
<button class="btn btn-outline-danger" aria-label="Ajouter aux favoris">
<i class="far fa-heart"></i>
</button>
</div>
<hr class="my-3">
<div class="row text-center">
<div class="col-4">
<i class="fas fa-truck fa-2x text-muted mb-2"></i>
<p class="small mb-0">Livraison<br>gratuite</p>
</div>
<div class="col-4">
<i class="fas fa-undo-alt fa-2x text-muted mb-2"></i>
<p class="small mb-0">Retour<br>30 jours</p>
</div>
<div class="col-4">
<i class="fas fa-lock fa-2x text-muted mb-2"></i>
<p class="small mb-0">Paiement<br>sécurisé</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Product Description -->
<div class="card border-0 shadow-sm mt-4">
<div class="card-body">
<ul class="nav nav-tabs mb-3" id="productTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="description-tab" data-bs-toggle="tab"
data-bs-target="#description" type="button" role="tab">Description</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="specs-tab" data-bs-toggle="tab"
data-bs-target="#specs" type="button" role="tab">Spécifications</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="reviews-tab" data-bs-toggle="tab"
data-bs-target="#reviews" type="button" role="tab">Avis clients</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="description" role="tabpanel">
<p>Ce produit exceptionnel est conçu pour répondre aux besoins les plus exigeants.
Sa conception ergonomique et ses matériaux premium garantissent une expérience utilisateur incomparable.</p>
<p>Idéal pour les professionnels comme pour les particuliers exigeants, ce produit allie performance,
durabilité et design élégant.</p>
</div>
<div class="tab-pane fade" id="specs" role="tabpanel">
<table class="table table-bordered">
<tr><th>Dimensions</th><td>30 x 20 x 10 cm</td></tr>
<tr><th>Poids</th><td>1.2 kg</td></tr>
<tr><th>Matériau</th><td>Aluminium brossé</td></tr>
<tr><th>Garantie</th><td>5 ans</td></tr>
</table>
</div>
<div class="tab-pane fade" id="reviews" role="tabpanel">
<div class="d-flex mb-3">
<div class="me-3">
<i class="fas fa-user-circle fa-3x text-muted"></i>
</div>
<div>
<h6 class="mb-1">Jean Dupont</h6>
<div class="mb-1">
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
</div>
<p class="mb-0">Excellent produit, conforme à la description. Livraison rapide !</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur