Bootstrap 5
E Commerce
Template
Responsive
Catalogue
Panier
Cards
Boutique
Html
Css
Template e-commerce complet avec Bootstrap 5, grille responsive, cards produits, navbar collapsible, filtres latéraux et composants UI modernes.
<!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>Template E Commerce Bootstrap 5 2026 04291651 | AngularForAll</title>
<!-- Bootstrap 5 CSS + Icons + Google Fonts -->
<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">
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
body {
background: linear-gradient(135deg, #fdfbf7 0%, #f6f2ea 100%);
color: #2c2b28;
}
/* Navbar style */
.navbar-custom {
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(8px);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
border-bottom: 1px solid #ede6dc;
}
.navbar-brand {
font-weight: 700;
font-size: 1.6rem;
letter-spacing: -0.3px;
background: linear-gradient(135deg, #2c5f2d, #7e5a3c);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
/* cards style personnalisés sur Bootstrap */
.product-card {
border: none;
border-radius: 1.25rem;
background: #ffffff;
transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.02), 0 0 0 1px #f0eae2;
overflow: hidden;
height: 100%;
}
.product-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 30px -12px rgba(60, 45, 30, 0.12), 0 0 0 1px #e2d5c8;
}
.card-img-top {
border-top-left-radius: 1.25rem;
border-top-right-radius: 1.25rem;
object-fit: cover;
height: 260px;
width: 100%;
transition: transform 0.5s ease;
}
.product-card:hover .card-img-top {
transform: scale(1.02);
}
.badge-custom {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 2;
background: #ffffffcc;
backdrop-filter: blur(8px);
color: #5a3e2b;
font-weight: 600;
font-size: 0.7rem;
padding: 0.3rem 0.9rem;
border-radius: 40px;
letter-spacing: 0.3px;
border: 1px solid rgba(0,0,0,0.05);
}
.badge-promo {
background: #d4af7a;
color: white;
border: none;
}
.rating {
color: #f5b642;
font-size: 0.85rem;
letter-spacing: 2px;
}
.card-title {
font-weight: 700;
font-size: 1.2rem;
margin-bottom: 0.5rem;
color: #2c2b28;
}
.price {
font-size: 1.4rem;
font-weight: 700;
color: #2c5f2d;
}
.old-price {
font-size: 0.9rem;
color: #a28c72;
text-decoration: line-through;
margin-left: 0.5rem;
}
.btn-cart {
background: #f4efe8;
border: 1px solid #e2d5c6;
color: #5a4a38;
font-weight: 600;
padding: 0.6rem 0;
border-radius: 60px;
transition: all 0.2s;
width: 100%;
}
.btn-cart:hover {
background: #e7ddcf;
border-color: #ccb69b;
color: #3e2e1f;
transform: translateY(-2px);
}
.btn-outline-custom {
background: transparent;
border: 1px solid #ddd0c0;
color: #7a6248;
}
.btn-outline-custom:hover {
background: #f7f2ec;
}
.hero-section {
background: linear-gradient(112deg, #fefaf5 0%, #f9f3ea 100%);
border-radius: 2rem;
padding: 2.5rem 1.5rem;
margin-bottom: 2rem;
border: 1px solid #efe4d8;
}
footer {
border-top: 1px solid #e9e0d6;
background: #fefcf9;
}
@media (max-width: 768px) {
.card-img-top {
height: 220px;
}
.hero-section {
padding: 1.8rem 1rem;
}
}
</style>
</head>
<body>
<!-- Navbar Bootstrap 5 light & minimal -->
<nav class="navbar navbar-expand-lg navbar-custom sticky-top py-2">
<div class="container">
<a class="navbar-brand" href="#">
<i class="bi bi-gem me-1"></i> Arti<span class="text-dark">Sens</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain" aria-label="Menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMain">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0 gap-2">
<li class="nav-item"><a class="nav-link active" href="#">Accueil</a></li>
<li class="nav-item"><a class="nav-link" href="#">Collection</a></li>
<li class="nav-item"><a class="nav-link" href="#">Atelier</a></li>
<li class="nav-item"><a class="nav-link" href="#">Inspiration</a></li>
</ul>
<div class="d-flex gap-2">
<a href="#" class="btn btn-outline-secondary rounded-pill" aria-label="Ajouter aux favoris">
<i class="bi bi-heart"></i>
</a>
<a href="#" class="btn btn-dark rounded-pill" aria-label="Voir le panier">
<i class="bi bi-bag"></i> Panier
</a>
</div>
</div>
</div>
</nav>
<div class="container py-4">
<!-- Hero / Introduction -->
<div class="hero-section text-center">
<span class="badge bg-light text-dark rounded-pill px-3 py-2 mb-2"><i class="bi bi-flower1"></i> Édition limitée</span>
<h1 class="display-5 fw-semibold">Créations d'exception</h1>
<p class="lead text-secondary mx-auto" style="max-width: 600px;">Des objets façonnés à la main, matières nobles et design intemporel. Chaque pièce raconte une histoire.</p>
<div class="d-flex justify-content-center gap-2 mt-3">
<span class="badge bg-secondary-subtle text-secondary-emphasis px-3 py-2 rounded-pill"><i class="bi bi-star-fill text-warning"></i> Artisanat</span>
<span class="badge bg-secondary-subtle text-secondary-emphasis px-3 py-2 rounded-pill"><i class="bi bi-recycle"></i> Éco-responsable</span>
<span class="badge bg-secondary-subtle text-secondary-emphasis px-3 py-2 rounded-pill"><i class="bi bi-truck"></i> Livraison offerte</span>
</div>
</div>
<!-- Grille produits Bootstrap 5 cards -->
<div class="row g-4">
<!-- Carte produit 1 : Vase Céramique -->
<div class="col-sm-6 col-lg-4">
<div class="card product-card h-100">
<div class="position-relative">
<span class="badge-custom"><i class="bi bi-tag-fill"></i> Édition limitée</span>
<img src="public/baff.webp" class="card-img-top" alt="Vase céramique organique" loading="lazy">
</div>
<div class="card-body d-flex flex-column">
<div class="d-flex justify-content-between align-items-start mb-2">
<span class="badge bg-light text-dark-emphasis rounded-pill">Céramique</span>
<div class="rating"><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 small">(43)</span></div>
</div>
<h5 class="card-title">Vase « Terra Lenta »</h5>
<p class="card-text text-secondary small">Pièce unique tournée à la main, émail réactif terre cuite. Idéal pour compositions sèches ou fleurs.</p>
<div class="mt-auto">
<div class="d-flex align-items-baseline mb-3">
<span class="price">89 €</span>
<span class="old-price">125 €</span>
</div>
<button class="btn btn-cart"><i class="bi bi-cart-plus me-2"></i>Ajouter au panier</button>
</div>
</div>
</div>
</div>
<!-- Carte 2 : Bougie parfumée artisanale -->
<div class="col-sm-6 col-lg-4">
<div class="card product-card h-100">
<div class="position-relative">
<span class="badge-custom badge-promo"><i class="bi bi-fire"></i> Nouveauté</span>
<img src="public/mobile.png" class="card-img-top" alt="Bougie naturelle santal" loading="lazy">
</div>
<div class="card-body d-flex flex-column">
<div class="d-flex justify-content-between align-items-start mb-2">
<span class="badge bg-light text-dark-emphasis rounded-pill">Bien-être</span>
<div class="rating"><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> <span class="text-secondary small">(128)</span></div>
</div>
<h5 class="card-title">Bougie « Bois Sacré »</h5>
<p class="card-text text-secondary small">Cire végétale, notes boisées & vanille, 50h de combustion. Verre réutilisable, fabrication française.</p>
<div class="mt-auto">
<div class="d-flex align-items-baseline mb-3">
<span class="price">39 €</span>
</div>
<button class="btn btn-cart"><i class="bi bi-cart-plus me-2"></i>Ajouter</button>
</div>
</div>
</div>
</div>
<!-- Carte 3 : Sac bandoulière en lin -->
<div class="col-sm-6 col-lg-4">
<div class="card product-card h-100">
<div class="position-relative">
<img src="public/mosquee.jpeg" class="card-img-top" alt="Sac en lin artisanal" loading="lazy">
</div>
<div class="card-body d-flex flex-column">
<div class="d-flex justify-content-between align-items-start mb-2">
<span class="badge bg-light text-dark-emphasis rounded-pill">Accessoire</span>
<div class="rating"><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 small">(95)</span></div>
</div>
<h5 class="card-title">Sac bandoulière lin indigo</h5>
<p class="card-text text-secondary small">Upcyclé, teinture naturelle, poches intérieures, anses réglables. Éco-conçu en atelier local.</p>
<div class="mt-auto">
<div class="d-flex align-items-baseline mb-3">
<span class="price">74 €</span>
<span class="old-price">98 €</span>
</div>
<button class="btn btn-cart"><i class="bi bi-cart-plus me-2"></i>Ajouter</button>
</div>
</div>
</div>
</div>
<!-- Carte 4 : Plateau bois massif (promo) -->
<div class="col-sm-6 col-lg-4">
<div class="card product-card h-100">
<div class="position-relative">
<span class="badge-custom badge-promo"><i class="bi bi-percent"></i> -30%</span>
<img src="public/ordinateur-portable-laptop.webp" class="card-img-top" alt="Plateau en noyer massif" loading="lazy">
</div>
<div class="card-body d-flex flex-column">
<div class="d-flex justify-content-between align-items-start mb-2">
<span class="badge bg-light text-dark-emphasis rounded-pill">Décoration</span>
<div class="rating"><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 small">(61)</span></div>
</div>
<h5 class="card-title">Plateau « Noyer vivant »</h5>
<p class="card-text text-secondary small">Chutes de noyer français, finition huile d'olive. Parfait pour servir ou présenter des objets précieux.</p>
<div class="mt-auto">
<div class="d-flex align-items-baseline mb-3">
<span class="price">59 €</span>
<span class="old-price">85 €</span>
</div>
<button class="btn btn-cart"><i class="bi bi-cart-plus me-2"></i>Profiter</button>
</div>
</div>
</div>
</div>
<!-- Carte 5 : Couverture / Plaid laine bio -->
<div class="col-sm-6 col-lg-4">
<div class="card product-card h-100">
<div class="position-relative">
<span class="badge-custom"><i class="bi bi-star"></i> Coup de cœur</span>
<img src="public/phoneL.webp" class="card-img-top" alt="Plaid en laine tissée main" loading="lazy">
</div>
<div class="card-body d-flex flex-column">
<div class="d-flex justify-content-between align-items-start mb-2">
<span class="badge bg-light text-dark-emphasis rounded-pill">Textile</span>
<div class="rating"><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> <span class="text-secondary small">(204)</span></div>
</div>
<h5 class="card-title">Plaid « Forêt enchantée »</h5>
<p class="card-text text-secondary small">Mérinos & alpaga, tissage traditionnel, douceur exceptionnelle, coloris sauge et terre.</p>
<div class="mt-auto">
<div class="d-flex align-items-baseline mb-3">
<span class="price">149 €</span>
</div>
<button class="btn btn-cart"><i class="bi bi-cart-plus me-2"></i>Ajouter</button>
</div>
</div>
</div>
</div>
<!-- Carte 6 : Carnet d'artiste reliure cuir -->
<div class="col-sm-6 col-lg-4">
<div class="card product-card h-100">
<div class="position-relative">
<img src="public/smartwash.webp" class="card-img-top" alt="Carnet reliure artisanale" loading="lazy">
</div>
<div class="card-body d-flex flex-column">
<div class="d-flex justify-content-between align-items-start mb-2">
<span class="badge bg-light text-dark-emphasis rounded-pill">Papeterie</span>
<div class="rating"><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 small">(37)</span></div>
</div>
<h5 class="card-title">Carnet « Écriture nomade »</h5>
<p class="card-text text-secondary small">Papier coton, reliure artisanale en cuir végétal, fermeture élastique — fabriqué à la main.</p>
<div class="mt-auto">
<div class="d-flex align-items-baseline mb-3">
<span class="price">34 €</span>
</div>
<button class="btn btn-outline-custom"><i class="bi bi-heart me-2"></i>En savoir plus</button>
</div>
</div>
</div>
</div>
</div>
<!-- Bannière valeurs supplémentaires (bootstrap columns) -->
<div class="row mt-5 g-3">
<div class="col-md-4">
<div class="d-flex align-items-center gap-3 p-3 bg-white rounded-4 border">
<i class="bi bi-truck fs-1 text-secondary"></i>
<div><strong>Livraison offerte</strong><br><small class="text-secondary">Dès 60€ d'achat, en France métropolitaine.</small></div>
</div>
</div>
<div class="col-md-4">
<div class="d-flex align-items-center gap-3 p-3 bg-white rounded-4 border">
<i class="bi bi-arrow-repeat fs-1 text-secondary"></i>
<div><strong>Retours faciles</strong><br><small class="text-secondary">30 jours pour échanger votre création.</small></div>
</div>
</div>
<div class="col-md-4">
<div class="d-flex align-items-center gap-3 p-3 bg-white rounded-4 border">
<i class="bi bi-gem fs-1 text-secondary"></i>
<div><strong>Artisanat local</strong><br><small class="text-secondary">Pièces uniques & savoir-faire.</small></div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="mt-5 pt-4 pb-3 text-center text-secondary">
<p class="small mb-0">© 2025 ArtiSens — Collection artisanale. Images à titre illustratif, inspirées par l'artisanat.</p>
</footer>
</div>
<!-- Bootstrap JS Bundle (pour toggles etc.) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Petit script interactif pour les boutons ajout panier console / alert démo -->
<script>
(function() {
const buttons = document.querySelectorAll('.btn-cart, .btn-outline-custom');
buttons.forEach(btn => {
btn.addEventListener('click', (e) => {
e.preventDefault();
const card = btn.closest('.product-card');
const productName = card?.querySelector('.card-title')?.innerText || 'produit';
console.log(`[Bootstrap5] 🛍️ Intérêt ajout : ${productName}`);
alert(`✨ "${productName}" ajouté à votre panier (démo interactive).\nDesign avec cartes Bootstrap 5.`);
});
});
console.log("Page produit Bootstrap 5 — cards élégantes, grille responsive, light mode.");
})();
</script>
</body>
</html>
Télécharger le fichier source