Bootstrap 5
E Commerce
Card Produit
Bootstrap 5 Design
Template
Html
Integration List
Card
Card Produit avec Bootstrap 5 optimisées pour la visualisation et l'interaction. Composants modernes et responsive.
<!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 Card Product Bootstrap 5 2026 23040041 | AngularForAll</title>
<!-- Bootstrap 5 + Icônes -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
* { font-family: 'Inter', sans-serif; }
body {
background: linear-gradient(135deg, #f8fafc 0%, #eef2f6 100%);
padding: 2rem 1rem;
}
h1 {
font-weight: 800;
background: linear-gradient(135deg, #1e293b, #3b82f6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.section-title {
font-weight: 700;
margin: 2.5rem 0 1.5rem 0;
padding-bottom: 0.75rem;
border-bottom: 3px solid rgba(59, 130, 246, 0.3);
}
.card-product {
border: none;
border-radius: 24px;
transition: all 0.3s ease;
background: white;
box-shadow: 0 10px 25px -8px rgba(0,0,0,0.06);
height: 100%;
}
.card-product:hover {
transform: translateY(-5px);
box-shadow: 0 25px 35px -12px rgba(0,0,0,0.12);
}
.product-img {
height: 160px;
display: flex;
align-items: center;
justify-content: center;
background: #fafcff;
border-radius: 20px;
}
.rating-stars {
color: #fbbf24;
letter-spacing: 2px;
}
.btn-cart {
border-radius: 40px;
padding: 0.6rem 1.2rem;
font-weight: 600;
transition: all 0.2s;
}
.quantity-selector {
display: flex;
align-items: center;
gap: 8px;
background: #f1f5f9;
border-radius: 40px;
padding: 4px;
}
.quantity-btn {
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: white;
font-weight: bold;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.badge-discount {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
}
.wishlist-icon {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
width: 36px;
height: 36px;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
color: #ef4444;
transition: all 0.2s;
}
.wishlist-icon:hover {
background: #fef2f2;
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="container-fluid px-lg-4">
<div class="d-flex align-items-center gap-3 mb-4">
<h1 class="display-4 mb-0"><i class="bi bi-cart-plus me-3"></i>20 Cartes · Ajouter au panier</h1>
<span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2 rounded-pill fs-6">Bootstrap 5.3</span>
</div>
<!-- ========== SECTION 1 : CARTES SIMPLES ========== -->
<h3 class="section-title"><i class="bi bi-1-circle-fill text-primary me-2"></i>Cartes classiques</h3>
<div class="row g-4 mb-4">
<!-- Carte 1 : Bouton simple -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card card-product p-3 position-relative">
<span class="badge-discount"><span class="badge bg-danger">-25%</span></span>
<div class="wishlist-icon"><i class="bi bi-heart"></i></div>
<div class="product-img mb-3">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='40' fill='%233b82f6' opacity='0.8'/%3E%3C/svg%3E" alt="Produit">
</div>
<h6 class="fw-bold">AudioTech Pro X1</h6>
<div class="rating-stars mb-1 small"><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> <span class="text-secondary ms-1">(128)</span></div>
<div class="d-flex align-items-center justify-content-between">
<div><span class="fw-bold fs-5">249,99 €</span><span class="text-secondary text-decoration-line-through small ms-2">349,99 €</span></div>
</div>
<button class="btn btn-primary btn-cart mt-3 w-100"><i class="bi bi-cart-plus me-2"></i>Ajouter au panier</button>
</div>
</div>
<!-- Carte 2 : Avec sélecteur de quantité -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card card-product p-3">
<div class="product-img mb-3">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='40' fill='%2310b981' opacity='0.8'/%3E%3C/svg%3E" alt="Produit">
</div>
<h6 class="fw-bold">AudioTech Air 3</h6>
<div class="rating-stars mb-1 small"><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"></i> <span class="text-secondary ms-1">(56)</span></div>
<div class="fw-bold fs-5 mb-2">179,99 €</div>
<div class="d-flex gap-2 align-items-center">
<div class="quantity-selector">
<button class="quantity-btn">−</button>
<span class="fw-semibold px-2">1</span>
<button class="quantity-btn">+</button>
</div>
<button class="btn btn-outline-primary btn-cart flex-grow-1"><i class="bi bi-cart-plus"></i></button>
</div>
</div>
</div>
<!-- Carte 3 : Bouton outline -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card card-product p-3">
<div class="product-img mb-3">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='40' fill='%238b5cf6' opacity='0.8'/%3E%3C/svg%3E" alt="Produit">
</div>
<h6 class="fw-bold">AudioTech Studio</h6>
<div class="fw-bold fs-5 mb-1">329,99 €</div>
<p class="small text-success mb-2"><i class="bi bi-check-circle-fill me-1"></i>En stock</p>
<button class="btn btn-outline-dark btn-cart w-100"><i class="bi bi-bag-plus me-2"></i>Ajouter</button>
</div>
</div>
<!-- Carte 4 : Icône uniquement -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card card-product p-3 text-center">
<div class="product-img mb-3">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='35' fill='%23f59e0b' opacity='0.8'/%3E%3C/svg%3E" alt="Produit">
</div>
<h6 class="fw-bold">AudioTech Sport</h6>
<div class="fw-bold mb-2">149,99 €</div>
<button class="btn btn-primary rounded-circle mx-auto" style="width: 50px; height: 50px;"><i class="bi bi-cart-plus fs-5"></i></button>
</div>
</div>
</div>
<!-- ========== SECTION 2 : CARTES AVEC VARIANTES ========== -->
<h3 class="section-title"><i class="bi bi-2-circle-fill text-primary me-2"></i>Avec options de couleur / taille</h3>
<div class="row g-4 mb-4">
<!-- Carte 5 : Sélecteur de couleur -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card card-product p-3">
<div class="product-img mb-2">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Ccircle cx='55' cy='55' r='35' fill='%23ef4444' opacity='0.8'/%3E%3C/svg%3E" alt="Produit">
</div>
<h6 class="fw-bold mb-1">AudioTech Buds Pro</h6>
<div class="fw-bold small mb-2">219,99 €</div>
<div class="d-flex gap-2 mb-3">
<span class="badge bg-danger rounded-circle p-2" style="width: 24px; height: 24px;"></span>
<span class="badge bg-primary rounded-circle p-2" style="width: 24px; height: 24px;"></span>
<span class="badge bg-dark rounded-circle p-2" style="width: 24px; height: 24px;"></span>
</div>
<button class="btn btn-danger btn-cart w-100"><i class="bi bi-cart-plus me-2"></i>Ajouter</button>
</div>
</div>
<!-- Carte 6 : Sélecteur de taille -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card card-product p-3">
<div class="product-img mb-2">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Ccircle cx='55' cy='55' r='35' fill='%2306b6d4' opacity='0.8'/%3E%3C/svg%3E" alt="Produit">
</div>
<h6 class="fw-bold mb-1">AudioTech Cushion</h6>
<div class="d-flex gap-1 mb-2">
<span class="badge bg-light text-dark border px-3 py-1">S</span>
<span class="badge bg-dark text-white px-3 py-1">M</span>
<span class="badge bg-light text-dark border px-3 py-1">L</span>
</div>
<div class="fw-bold mb-2">29,99 €</div>
<button class="btn btn-info text-white btn-cart w-100"><i class="bi bi-cart-plus me-2"></i>Ajouter</button>
</div>
</div>
<!-- Carte 7 : Double option -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card card-product p-3">
<span class="badge-discount"><span class="badge bg-warning text-dark">Best</span></span>
<div class="product-img mb-2">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Ccircle cx='55' cy='55' r='35' fill='%2322c55e' opacity='0.8'/%3E%3C/svg%3E" alt="Produit">
</div>
<h6 class="fw-bold">AudioTech Band</h6>
<div class="d-flex gap-1 mb-1">
<span class="badge bg-light border text-dark">38mm</span>
<span class="badge bg-primary">42mm</span>
<span class="badge bg-light border text-dark">44mm</span>
</div>
<div class="d-flex gap-2 mb-2">
<span class="badge bg-dark rounded-circle p-2"></span>
<span class="badge bg-secondary rounded-circle p-2"></span>
</div>
<div class="d-flex justify-content-between align-items-center">
<span class="fw-bold">49,99 €</span>
<button class="btn btn-success btn-sm rounded-pill"><i class="bi bi-cart-plus"></i></button>
</div>
</div>
</div>
<!-- Carte 8 : Options radio -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card card-product p-3">
<h6 class="fw-bold">AudioTech Case</h6>
<div class="small text-secondary mb-2">Choisir la couleur :</div>
<div class="mb-2">
<div class="form-check"><input class="form-check-input" type="radio" name="color" checked> <label class="form-check-label">Noir</label></div>
<div class="form-check"><input class="form-check-input" type="radio" name="color"> <label class="form-check-label">Bleu</label></div>
</div>
<div class="fw-bold mb-2">39,99 €</div>
<button class="btn btn-dark btn-cart w-100"><i class="bi bi-cart-plus me-2"></i>Ajouter</button>
</div>
</div>
</div>
<!-- ========== SECTION 3 : CARTES HORIZONTALES ========== -->
<h3 class="section-title"><i class="bi bi-3-circle-fill text-primary me-2"></i>Cartes horizontales</h3>
<div class="row g-4 mb-4">
<!-- Carte 9 : Horizontale simple -->
<div class="col-md-6">
<div class="card card-product flex-row p-3">
<div class="product-img me-3" style="width: 100px; height: 100px;">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='30' fill='%233b82f6' opacity='0.8'/%3E%3C/svg%3E" alt="Produit">
</div>
<div class="flex-grow-1">
<h6 class="fw-bold mb-1">AudioTech Pro X1</h6>
<div class="rating-stars small mb-1"><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"></i></div>
<div class="fw-bold mb-2">249,99 €</div>
<button class="btn btn-primary btn-sm rounded-pill px-3"><i class="bi bi-cart-plus me-1"></i>Ajouter</button>
</div>
</div>
</div>
<!-- Carte 10 : Horizontale avec quantité -->
<div class="col-md-6">
<div class="card card-product flex-row p-3 align-items-center">
<div class="product-img me-3" style="width: 100px; height: 100px;">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='30' fill='%2310b981' opacity='0.8'/%3E%3C/svg%3E" alt="Produit">
</div>
<div class="flex-grow-1">
<h6 class="fw-bold mb-1">AudioTech Air 3</h6>
<div class="fw-bold mb-1">179,99 €</div>
<p class="small text-success mb-2"><i class="bi bi-truck"></i> Livraison gratuite</p>
</div>
<div class="d-flex align-items-center gap-2">
<div class="quantity-selector">
<button class="quantity-btn">−</button><span class="px-2">1</span><button class="quantity-btn">+</button>
</div>
<button class="btn btn-outline-success rounded-circle"><i class="bi bi-cart-plus"></i></button>
</div>
</div>
</div>
</div>
<!-- ========== SECTION 4 : CARTES AVEC PROMOTIONS ========== -->
<h3 class="section-title"><i class="bi bi-4-circle-fill text-primary me-2"></i>Avec promotions et urgences</h3>
<div class="row g-4 mb-4">
<!-- Carte 11 : Compte à rebours -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card card-product p-3 border-danger border-2">
<span class="badge bg-danger position-absolute" style="top: -10px; left: 20px;">-40% FLASH</span>
<div class="product-img mt-2 mb-2">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='35' fill='%23ef4444' opacity='0.8'/%3E%3C/svg%3E" alt="Produit">
</div>
<h6 class="fw-bold">Offre flash</h6>
<div><span class="fw-bold fs-4">149,99 €</span> <span class="text-secondary text-decoration-line-through">249,99 €</span></div>
<div class="bg-light rounded-pill px-3 py-1 small my-2 text-center fw-semibold"><i class="bi bi-clock text-danger me-1"></i>02:45:18</div>
<button class="btn btn-danger btn-cart w-100"><i class="bi bi-lightning-charge-fill me-2"></i>J'en profite</button>
</div>
</div>
<!-- Carte 12 : Stock limité -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card card-product p-3">
<div class="product-img mb-2">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='35' fill='%23f59e0b' opacity='0.8'/%3E%3C/svg%3E" alt="Produit">
</div>
<h6 class="fw-bold">Édition Limitée</h6>
<div class="fw-bold mb-1">299,99 €</div>
<div class="progress mb-2" style="height: 6px;"><div class="progress-bar bg-warning" style="width: 85%"></div></div>
<p class="small text-danger mb-2"><i class="bi bi-fire"></i> Plus que 3 en stock !</p>
<button class="btn btn-warning text-dark btn-cart w-100 fw-bold"><i class="bi bi-cart-plus me-2"></i>Ajouter vite</button>
</div>
</div>
<!-- Carte 13 : Pack / Bundle -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card card-product p-3 bg-light border-0">
<span class="badge bg-success mb-2 align-self-start">PACK ÉCO</span>
<h6 class="fw-bold">Bundle Essentiel</h6>
<p class="small text-secondary">Casque + Housse + Câble</p>
<div><span class="fw-bold fs-5">199,99 €</span> <span class="text-secondary text-decoration-line-through small">279,97 €</span></div>
<p class="small text-success mt-1"><i class="bi bi-tags"></i> Économisez 79,98 €</p>
<button class="btn btn-success btn-cart w-100"><i class="bi bi-cart-plus me-2"></i>Ajouter le pack</button>
</div>
</div>
<!-- Carte 14 : Abonnement -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card card-product p-3">
<div class="product-img mb-2">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='35' fill='%238b5cf6' opacity='0.8'/%3E%3C/svg%3E" alt="Produit">
</div>
<h6 class="fw-bold">AudioTech Care+</h6>
<p class="small text-secondary">Assurance 2 ans</p>
<div class="fw-bold mb-2">4,99 € / mois</div>
<button class="btn btn-outline-purple btn-cart w-100" style="border-color: #8b5cf6; color: #8b5cf6;"><i class="bi bi-arrow-repeat me-2"></i>S'abonner</button>
</div>
</div>
</div>
<!-- ========== SECTION 5 : CARTES MODERNES / CRÉATIVES ========== -->
<h3 class="section-title"><i class="bi bi-5-circle-fill text-primary me-2"></i>Designs modernes & créatifs</h3>
<div class="row g-4 mb-4">
<!-- Carte 15 : Glassmorphism -->
<div class="col-sm-6 col-md-4">
<div class="card text-white p-4" style="background: rgba(30, 41, 59, 0.9); backdrop-filter: blur(10px); border-radius: 28px;">
<span class="badge bg-primary bg-opacity-50 mb-2 align-self-start">Nouveau</span>
<div class="d-flex align-items-center gap-3 mb-3">
<i class="bi bi-headphones fs-1"></i>
<div><h5 class="mb-0">AudioTech Pro</h5><div class="rating-stars small"><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-fill"></i></div></div>
</div>
<div class="d-flex justify-content-between align-items-end">
<span class="fs-3 fw-bold">249,99 €</span>
<button class="btn btn-light rounded-pill px-4"><i class="bi bi-cart-plus me-1"></i>Ajouter</button>
</div>
</div>
</div>
<!-- Carte 16 : Style minimal -->
<div class="col-sm-6 col-md-4">
<div class="card card-product p-4 text-center">
<i class="bi bi-earbuds fs-1 text-primary mb-2"></i>
<h5 class="fw-bold">AudioTech Air</h5>
<p class="text-secondary small">Écouteurs True Wireless</p>
<div class="display-6 fw-bold mb-3">179 €</div>
<button class="btn btn-link text-dark text-decoration-none fw-semibold">Ajouter au panier <i class="bi bi-arrow-right"></i></button>
</div>
</div>
<!-- Carte 17 : Avec image de fond -->
<div class="col-sm-6 col-md-4">
<div class="card text-white p-4 position-relative overflow-hidden" style="background: linear-gradient(135deg, #1e293b, #3b82f6); border-radius: 28px;">
<div class="position-relative z-1">
<span class="badge bg-light text-dark mb-2">-30%</span>
<h4 class="fw-bold">Studio Pro</h4>
<p class="opacity-75">Casque monitoring professionnel</p>
<div class="d-flex align-items-center gap-3 mt-3">
<span class="fs-3 fw-bold">329 €</span>
<button class="btn btn-light rounded-pill"><i class="bi bi-cart-plus"></i></button>
</div>
</div>
<div class="position-absolute bottom-0 end-0 opacity-25"><i class="bi bi-headphones" style="font-size: 100px;"></i></div>
</div>
</div>
</div>
<!-- ========== SECTION 6 : CARTES AVEC ANIMATIONS ========== -->
<h3 class="section-title"><i class="bi bi-6-circle-fill text-primary me-2"></i>Avec micro-interactions</h3>
<div class="row g-4">
<!-- Carte 18 : Bouton qui se transforme -->
<div class="col-sm-6 col-md-3">
<div class="card card-product p-3">
<div class="product-img mb-2">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='35' fill='%23ec4899' opacity='0.8'/%3E%3C/svg%3E" alt="Produit">
</div>
<h6 class="fw-bold">AudioTech Mini</h6>
<div class="fw-bold mb-3">89,99 €</div>
<button class="btn btn-outline-primary btn-cart w-100 group">
<span class="default-content"><i class="bi bi-cart-plus me-2"></i>Ajouter</span>
</button>
</div>
</div>
<!-- Carte 19 : Ajout rapide avec feedback -->
<div class="col-sm-6 col-md-3">
<div class="card card-product p-3">
<div class="product-img mb-2">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='35' fill='%2306b6d4' opacity='0.8'/%3E%3C/svg%3E" alt="Produit">
</div>
<h6 class="fw-bold">AudioTech Open</h6>
<div class="fw-bold mb-2">129,99 €</div>
<div class="d-flex gap-1">
<button class="btn btn-primary flex-grow-1"><i class="bi bi-cart-plus me-1"></i>Ajouter</button>
<button class="btn btn-outline-secondary"><i class="bi bi-heart"></i></button>
</div>
</div>
</div>
<!-- Carte 20 : Swipe / Slider quantité -->
<div class="col-sm-6 col-md-3">
<div class="card card-product p-3">
<div class="product-img mb-2">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='35' fill='%2322c55e' opacity='0.8'/%3E%3C/svg%3E" alt="Produit">
</div>
<h6 class="fw-bold">AudioTech Charge</h6>
<div class="fw-bold mb-2">59,99 €</div>
<div class="d-flex align-items-center gap-2">
<span class="small text-secondary">Qté:</span>
<input type="range" class="form-range" min="1" max="5" value="1" style="width: 80px;">
<button class="btn btn-success btn-sm rounded-pill"><i class="bi bi-cart-plus"></i></button>
</div>
</div>
</div>
<!-- Carte 21 (bonus) : Style luxe -->
<div class="col-sm-6 col-md-3">
<div class="card p-4 border-0" style="background: linear-gradient(145deg, #f8fafc, #eef2f6); border-radius: 32px;">
<div class="d-flex align-items-center gap-2 mb-2">
<i class="bi bi-gem fs-3" style="color: #b45309;"></i>
<h5 class="fw-bold mb-0">Édition Prestige</h5>
</div>
<p class="small text-secondary">Plaqué or 24 carats</p>
<div class="display-6 fw-bold mb-3" style="color: #b45309;">1 299 €</div>
<button class="btn btn-outline-warning rounded-pill py-2 fw-semibold"><i class="bi bi-bag-plus me-2"></i>Commander</button>
</div>
</div>
</div>
<!-- Footer -->
<div class="text-center text-secondary small mt-5 pt-4 border-top">
<i class="bi bi-cart-check me-1"></i> 20+ exemples de cartes "Ajouter au panier" · Bootstrap 5 · Design variés
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Animation simple pour les boutons de quantité
document.querySelectorAll('.quantity-btn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
const span = this.parentElement.querySelector('span');
if (span) {
let val = parseInt(span.textContent) || 1;
val = this.textContent === '+' ? val + 1 : Math.max(1, val - 1);
span.textContent = val;
}
});
});
</script>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur