Bootstrap
Bootstrap5
Ecommerce
Produit
Cart
Html
Template e-commerce Bootstrap 5 complète avec cartes produits, panier, navigation et checkout intégré.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Bootstrap 5 • E‑Commerce Cards</title>
<!-- Bootstrap 5 + Icons + minimal custom CSS -->
<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">
<style>
/* custom tweaks – fully responsive, card enhancements */
body {
background: #f8f9fa;
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}
.navbar-brand {
font-weight: 650;
letter-spacing: -0.02em;
font-size: 1.6rem;
}
.hero-gradient {
background: linear-gradient(135deg, #0a2540 0%, #1b3b5c 100%);
color: white;
padding: 2.5rem 0;
border-radius: 0 0 2rem 2rem;
margin-bottom: 2.5rem;
}
.card {
border: none;
border-radius: 1.2rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.07);
height: 100%;
background: white;
overflow: hidden;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 30px -10px rgba(0, 20, 40, 0.15);
}
.card-img-top {
height: 210px;
object-fit: cover;
background-color: #e9ecef;
padding: 0.5rem;
}
.badge-custom {
background: #eef2ff;
color: #1e3a8a;
font-weight: 500;
padding: 0.35rem 1rem;
border-radius: 30px;
font-size: 0.8rem;
}
.price-tag {
font-weight: 700;
font-size: 1.5rem;
color: #0b2b4a;
}
.btn-outline-accent {
border: 1.5px solid #1e3a8a;
color: #1e3a8a;
border-radius: 40px;
padding: 0.4rem 1.2rem;
font-weight: 500;
transition: all 0.15s;
}
.btn-outline-accent:hover {
background: #1e3a8a;
color: white;
border-color: #1e3a8a;
}
.btn-primary-custom {
background: #0a2540;
border: none;
border-radius: 40px;
padding: 0.5rem 1.5rem;
font-weight: 500;
color: white;
box-shadow: 0 4px 8px rgba(10, 37, 64, 0.2);
}
.btn-primary-custom:hover {
background: #143650;
color: white;
}
.footer-link {
color: #adb5bd;
text-decoration: none;
font-size: 0.9rem;
}
.footer-link:hover {
color: white;
text-decoration: underline;
}
.rating-stars {
color: #f5b342;
letter-spacing: 2px;
}
.cart-badge {
position: relative;
top: -8px;
left: -5px;
}
/* fully responsive container */
@media (max-width: 576px) {
.hero-gradient h1 {
font-size: 1.8rem;
}
.card-img-top {
height: 180px;
}
}
</style>
</head>
<body>
<!-- ================= NAVBAR ================= -->
<nav class="navbar navbar-expand-lg bg-white py-3 shadow-sm sticky-top">
<div class="container">
<a class="navbar-brand text-dark" href="#">
<i class="bi bi-bag-heart-fill me-2" style="color: #0a2540;"></i>KART<span style="font-weight:300; color:#2c5f8a;">LY</span>
</a>
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain"
aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
<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 fw-medium">
<li class="nav-item"><a class="nav-link active text-dark" aria-current="page" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link text-secondary" href="#">Shop</a></li>
<li class="nav-item"><a class="nav-link text-secondary" href="#">Collections</a></li>
<li class="nav-item"><a class="nav-link text-secondary" href="#">Deals</a></li>
<li class="nav-item"><a class="nav-link text-secondary" href="#">About</a></li>
</ul>
<form class="d-flex me-3" role="search">
<div class="input-group">
<input class="form-control rounded-pill border-end-0" type="search" placeholder="Search products..." aria-label="Search" style="min-width:200px">
<button class="btn btn-outline-secondary rounded-pill border-start-0" type="submit"><i class="bi bi-search"></i></button>
</div>
</form>
<div class="d-flex align-items-center">
<a href="#" class="text-dark me-3 position-relative">
<i class="bi bi-heart fs-5"></i>
</a>
<a href="#" class="text-dark position-relative">
<i class="bi bi-cart3 fs-5"></i>
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger cart-badge">
3
<span class="visually-hidden">items in cart</span>
</span>
</a>
</div>
</div>
</div>
</nav>
<!-- ================= HERO / PROMO ================= -->
<section class="hero-gradient">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 mb-4 mb-lg-0">
<span class="badge bg-light bg-opacity-25 text-white mb-3 px-3 py-2 rounded-pill">✨ spring refresh</span>
<h1 class="display-5 fw-bold">Elevate your everyday</h1>
<p class="lead fs-5 opacity-90">Discover curated essentials with free shipping on orders over $50.</p>
<button class="btn btn-light btn-lg rounded-pill px-4 me-2 mt-2 shadow-sm">
Shop now <i class="bi bi-arrow-right-short"></i>
</button>
<button class="btn btn-outline-light btn-lg rounded-pill px-4 mt-2">
Collections
</button>
</div>
<div class="col-lg-6 text-center text-lg-end">
<img src="https://placehold.co/500x280/1e3a8a/white?text=Style+%2B+Comfort" alt="hero visual"
class="img-fluid rounded-4 shadow" style="max-height:260px; object-fit:cover;"
onerror="this.src='https://placehold.co/500x280/0a2540/ffffff?text=KARTLY'">
</div>
</div>
</div>
</section>
<!-- ================= MAIN: PRODUCT CARDS (E-COMMERCE CARDS) ================= -->
<main class="container my-5">
<!-- section header -->
<div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
<div>
<h2 class="fw-bold mb-1">✨ Featured products</h2>
<p class="text-secondary"><i class="bi bi-tags-fill me-1"></i> Handpicked for you</p>
</div>
<a href="#" class="text-decoration-none fw-semibold" style="color:#0a2540;">View all <i class="bi bi-chevron-right"></i></a>
</div>
<!-- Responsive card grid: 1, 2, 3, 4 columns depending on breakpoint -->
<div class="row g-4">
<!-- CARD 1 -->
<div class="col-sm-6 col-md-6 col-lg-3">
<div class="card p-2 p-xl-3">
<div class="position-relative">
<span class="badge bg-dark text-white position-absolute top-0 end-0 m-2 px-3 py-2 rounded-pill">-20%</span>
<img src="https://placehold.co/400x300/e2e8f0/1e293b?text=CLASSIC+TEE"
class="card-img-top rounded-4" alt="Classic Tee"
onerror="this.src='https://placehold.co/400x300/d1d5db/1e293b?text=Tee'">
</div>
<div class="card-body px-2 pb-2">
<div class="d-flex justify-content-between align-items-start">
<span class="badge-custom"><i class="bi bi-star-fill text-warning me-1"></i>4.8 (342)</span>
<span class="text-secondary"><i class="bi bi-heart"></i></span>
</div>
<h5 class="card-title fw-semibold mt-2 mb-0">Premium Cotton Tee</h5>
<p class="text-secondary small mb-2">Unisex • 6 colors</p>
<div class="d-flex align-items-center gap-2 mb-3">
<span class="price-tag">$29.90</span>
<span class="text-decoration-line-through text-secondary small">$37.50</span>
</div>
<div class="d-grid">
<button class="btn btn-outline-accent">
<i class="bi bi-cart-plus me-1"></i> Add to cart
</button>
</div>
<div class="mt-2 text-center">
<small class="text-success"><i class="bi bi-truck"></i> Free shipping</small>
</div>
</div>
</div>
</div>
<!-- CARD 2 -->
<div class="col-sm-6 col-md-6 col-lg-3">
<div class="card p-2 p-xl-3">
<div class="position-relative">
<span class="badge bg-success text-white position-absolute top-0 end-0 m-2 px-3 py-2 rounded-pill">New</span>
<img src="https://placehold.co/400x300/f1f5f9/0f172a?text=SNEAKER+PRO"
class="card-img-top rounded-4" alt="Sneaker"
onerror="this.src='https://placehold.co/400x300/cbd5e1/0f172a?text=Sneaker'">
</div>
<div class="card-body px-2 pb-2">
<div class="d-flex justify-content-between">
<span class="badge-custom"><i class="bi bi-star-fill text-warning me-1"></i>4.9 (128)</span>
<i class="bi bi-bookmark-plus text-secondary"></i>
</div>
<h5 class="card-title fw-semibold mt-2 mb-0">CloudWalk Runner</h5>
<p class="text-secondary small mb-2">Running • lightweight</p>
<div class="d-flex align-items-center gap-2 mb-3">
<span class="price-tag">$89.00</span>
<span class="text-secondary small">from $120</span>
</div>
<div class="d-grid">
<button class="btn btn-outline-accent">
<i class="bi bi-cart-plus me-1"></i> Add to cart
</button>
</div>
<div class="mt-2 text-center">
<small class="text-success"><i class="bi bi-check-circle"></i> In stock</small>
</div>
</div>
</div>
</div>
<!-- CARD 3 -->
<div class="col-sm-6 col-md-6 col-lg-3">
<div class="card p-2 p-xl-3">
<div class="position-relative">
<span class="badge bg-warning text-dark position-absolute top-0 end-0 m-2 px-3 py-2 rounded-pill">Trending</span>
<img src="https://placehold.co/400x300/d9d9d9/1e1e2f?text=BACKPACK"
class="card-img-top rounded-4" alt="Backpack"
onerror="this.src='https://placehold.co/400x300/b0b0b0/1e1e2f?text=Backpack'">
</div>
<div class="card-body px-2 pb-2">
<div class="d-flex justify-content-between">
<span class="badge-custom"><i class="bi bi-star-fill text-warning me-1"></i>4.7 (512)</span>
<i class="bi bi-heart-fill text-danger"></i>
</div>
<h5 class="card-title fw-semibold mt-2 mb-0">Urban Daypack</h5>
<p class="text-secondary small mb-2">Water-resistant • 20L</p>
<div class="d-flex align-items-center gap-2 mb-3">
<span class="price-tag">$64.99</span>
<span class="text-secondary small"> </span>
</div>
<div class="d-grid">
<button class="btn btn-outline-accent">
<i class="bi bi-cart-plus me-1"></i> Add to cart
</button>
</div>
<div class="mt-2 text-center">
<small class="text-secondary"><i class="bi bi-clock"></i> 2-day shipping</small>
</div>
</div>
</div>
</div>
<!-- CARD 4 -->
<div class="col-sm-6 col-md-6 col-lg-3">
<div class="card p-2 p-xl-3">
<div class="position-relative">
<span class="badge bg-info text-dark position-absolute top-0 end-0 m-2 px-3 py-2 rounded-pill">Eco</span>
<img src="https://placehold.co/400x300/e6e9f0/1e1e2f?text=BOTTLE"
class="card-img-top rounded-4" alt="Bottle"
onerror="this.src='https://placehold.co/400x300/a5b4cb/1e1e2f?text=Bottle'">
</div>
<div class="card-body px-2 pb-2">
<div class="d-flex justify-content-between">
<span class="badge-custom"><i class="bi bi-star-fill text-warning me-1"></i>4.6 (87)</span>
<i class="bi bi-heart"></i>
</div>
<h5 class="card-title fw-semibold mt-2 mb-0">Insulated Bottle</h5>
<p class="text-secondary small mb-2">Stainless • 500ml</p>
<div class="d-flex align-items-center gap-2 mb-3">
<span class="price-tag">$34.50</span>
<span class="text-decoration-line-through text-secondary small">$42.00</span>
</div>
<div class="d-grid">
<button class="btn btn-outline-accent">
<i class="bi bi-cart-plus me-1"></i> Add to cart
</button>
</div>
<div class="mt-2 text-center">
<small class="text-success"><i class="bi bi-leaf"></i> sustainable</small>
</div>
</div>
</div>
</div>
</div>
<!-- second row of cards (more products to showcase e‑commerce density) -->
<div class="row g-4 mt-2">
<!-- CARD 5 -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card p-2">
<img src="https://placehold.co/400x300/f3f4f6/111827?text=WATCH"
class="card-img-top rounded-4" alt="Watch"
onerror="this.src='https://placehold.co/400x300/9ca3af/111827?text=Watch'">
<div class="card-body">
<span class="badge-custom mb-2 d-inline-block"><i class="bi bi-star-fill text-warning me-1"></i>4.9 (56)</span>
<h5 class="fw-semibold">Minimalist Watch</h5>
<p class="small text-secondary">leather strap</p>
<div class="d-flex align-items-baseline gap-2">
<span class="fw-bold fs-5">$129</span>
<span class="text-secondary small text-decoration-line-through">$159</span>
</div>
<button class="btn btn-outline-accent w-100 mt-3"><i class="bi bi-bag-plus"></i> Add</button>
</div>
</div>
</div>
<!-- CARD 6 -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card p-2">
<img src="https://placehold.co/400x300/e5e7eb/1f2937?text=HEADPHONES"
class="card-img-top rounded-4" alt="Headphones"
onerror="this.src='https://placehold.co/400x300/6b7280/1f2937?text=Audio'">
<div class="card-body">
<span class="badge-custom mb-2 d-inline-block"><i class="bi bi-star-fill text-warning me-1"></i>4.8 (212)</span>
<h5 class="fw-semibold">Wireless ANC</h5>
<p class="small text-secondary">noise canceling</p>
<div class="d-flex align-items-baseline gap-2">
<span class="fw-bold fs-5">$199</span>
</div>
<button class="btn btn-outline-accent w-100 mt-3"><i class="bi bi-cart-plus"></i> Add</button>
</div>
</div>
</div>
<!-- CARD 7 -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card p-2">
<img src="https://placehold.co/400x300/f8fafc/0f172a?text=SUSTAINABLE+JEANS"
class="card-img-top rounded-4" alt="Jeans"
onerror="this.src='https://placehold.co/400x300/94a3b8/0f172a?text=Denim'">
<div class="card-body">
<span class="badge-custom mb-2 d-inline-block"><i class="bi bi-star-fill text-warning me-1"></i>4.5 (144)</span>
<h5 class="fw-semibold">Relaxed Denim</h5>
<p class="small text-secondary">organic cotton</p>
<div class="d-flex align-items-baseline gap-2">
<span class="fw-bold fs-5">$79.95</span>
</div>
<button class="btn btn-outline-accent w-100 mt-3"><i class="bi bi-cart-plus"></i> Add</button>
</div>
</div>
</div>
<!-- CARD 8 (special offer) -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card p-2 bg-light border-0 shadow-sm">
<div class="card-body text-center py-4">
<i class="bi bi-gift-fill fs-1" style="color:#0a2540;"></i>
<h5 class="mt-2 fw-bold">Gift with purchase</h5>
<p class="small">Spend $100+ get a free tote</p>
<button class="btn btn-primary-custom btn-sm px-4">Learn more</button>
</div>
<!-- it's a promo card, but still part of e‑commerce cards layout -->
</div>
</div>
</div>
<!-- category chips / quick filters (optional) -->
<div class="d-flex flex-wrap gap-2 justify-content-center mt-5">
<span class="badge bg-white text-dark border rounded-pill px-4 py-2 shadow-sm">👕 Clothing</span>
<span class="badge bg-white text-dark border rounded-pill px-4 py-2 shadow-sm">👟 Footwear</span>
<span class="badge bg-white text-dark border rounded-pill px-4 py-2 shadow-sm">🎒 Bags</span>
<span class="badge bg-white text-dark border rounded-pill px-4 py-2 shadow-sm">⌚ Accessories</span>
<span class="badge bg-white text-dark border rounded-pill px-4 py-2 shadow-sm">🌿 Eco</span>
</div>
</main>
<!-- ================= NEWSLETTER / BANNER ================= -->
<section class="container mb-5">
<div class="bg-white p-4 p-md-5 rounded-4 shadow-sm border">
<div class="row align-items-center">
<div class="col-md-6">
<h3 class="fw-bold">Get 15% off your first order</h3>
<p class="text-secondary">Subscribe for exclusive deals & early access.</p>
<div class="input-group">
<input type="email" class="form-control rounded-pill py-2 px-3" placeholder="Your email">
<button class="btn btn-dark rounded-pill px-4 ms-2" type="button">Subscribe</button>
</div>
</div>
<div class="col-md-6 text-end d-none d-md-block">
<i class="bi bi-envelope-paper-heart display-3" style="color:#0a2540; opacity:0.7;"></i>
</div>
</div>
</div>
</section>
<!-- ================= FOOTER ================= -->
<footer class="bg-dark text-white pt-5 pb-4 mt-4">
<div class="container">
<div class="row gy-4">
<div class="col-md-5">
<h5 class="fw-semibold"><i class="bi bi-bag-heart-fill me-2"></i>KARTLY</h5>
<p class="small text-secondary-emphasis" style="color:#aaa !important;">Modern e‑commerce essentials. Designed with care.</p>
<div>
<a href="#" class="text-white-50 me-3"><i class="bi bi-instagram fs-5"></i></a>
<a href="#" class="text-white-50 me-3"><i class="bi bi-facebook fs-5"></i></a>
<a href="#" class="text-white-50"><i class="bi bi-pinterest fs-5"></i></a>
</div>
</div>
<div class="col-6 col-md-2">
<h6 class="fw-semibold">Shop</h6>
<ul class="list-unstyled small">
<li class="mb-2"><a href="#" class="footer-link">All products</a></li>
<li class="mb-2"><a href="#" class="footer-link">New arrivals</a></li>
<li class="mb-2"><a href="#" class="footer-link">Best sellers</a></li>
<li class="mb-2"><a href="#" class="footer-link">Sale</a></li>
</ul>
</div>
<div class="col-6 col-md-2">
<h6 class="fw-semibold">Support</h6>
<ul class="list-unstyled small">
<li class="mb-2"><a href="#" class="footer-link">Help center</a></li>
<li class="mb-2"><a href="#" class="footer-link">Shipping</a></li>
<li class="mb-2"><a href="#" class="footer-link">Returns</a></li>
<li class="mb-2"><a href="#" class="footer-link">Contact</a></li>
</ul>
</div>
<div class="col-md-3">
<h6 class="fw-semibold">Payment</h6>
<div class="d-flex gap-2 fs-4 text-white-50">
<i class="bi bi-credit-card"></i>
<i class="bi bi-paypal"></i>
<i class="bi bi-google"></i>
<i class="bi bi-apple"></i>
</div>
<p class="small text-white-50 mt-3">© 2026 Kartly. All rights reserved.</p>
</div>
</div>
<hr class="opacity-25">
<div class="d-flex flex-wrap justify-content-between small text-white-50">
<span>🇺🇸 English (US)</span>
<span><i class="bi bi-shield-check"></i> Secure checkout</span>
</div>
</div>
</footer>
<!-- Bootstrap JS bundle for toggler & interactions -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- (no extra JS needed – fully functional) -->
</body>
</html>