Carousel
Produits
Bootstrap 5
Responsive
Html
Css
E Commerce
Slider
Snippet
Intro
Composant
Accueil
Section intro Bootstrap 5 avec carousel slider et grille produits mis en avant. Combinez promotions et catalogue pour une page d'accueil e-commerce efficace.
<!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>Snippet Intro Bootstrap5 2026 05050002 | AngularForAll</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Carousel -->
<div id="demoCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button data-bs-target="#demoCarousel" data-bs-slide-to="0" class="active" aria-label="indicators"></button>
<button data-bs-target="#demoCarousel" data-bs-slide-to="1" aria-label="indicators"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" style="background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('public/bg1.webp') center/cover; height: 500px;">
<div class="carousel-caption d-flex flex-column justify-content-center h-100">
<h2 class="display-4 fw-bold">Offre Spéciale</h2>
<p class="lead">-30% sur tous nos produits</p>
</div>
</div>
<div class="carousel-item" style="background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('public/mosquee.jpeg') center/cover; height: 500px;">
<div class="carousel-caption d-flex flex-column justify-content-center h-100">
<h2 class="display-4 fw-bold">Nouvelle Collection</h2>
<p class="lead">Découvrez les tendances</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#demoCarousel" data-bs-slide="prev" aria-label="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demoCarousel" data-bs-slide="next" aria-label="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<!-- Grille Produits -->
<div class="container py-5">
<h2 class="text-center mb-5 fw-bold">Produits Populaires</h2>
<div class="row g-4">
<div class="col-md-3">
<div class="card h-100">
<img src="public/baff.webp" class="card-img-top" alt="Produit">
<div class="card-body">
<h5 class="card-title">Produit Premium</h5>
<p class="card-text text-muted">Description courte du produit</p>
<div class="d-flex justify-content-between align-items-center">
<span class="h5 text-primary mb-0">49,99€</span>
<button class="btn btn-outline-primary btn-sm">Ajouter</button>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card h-100">
<img src="public/main-phone.webp" class="card-img-top" alt="Produit">
<div class="card-body">
<h5 class="card-title">Produit Essentiel</h5>
<p class="card-text text-muted">Description courte du produit</p>
<div class="d-flex justify-content-between align-items-center">
<span class="h5 text-primary mb-0">29,99€</span>
<button class="btn btn-outline-primary btn-sm">Ajouter</button>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card h-100">
<img src="public/main-robot.webp" class="card-img-top" alt="Produit">
<div class="card-body">
<h5 class="card-title">Produit Expert</h5>
<p class="card-text text-muted">Description courte du produit</p>
<div class="d-flex justify-content-between align-items-center">
<span class="h5 text-primary mb-0">79,99€</span>
<button class="btn btn-outline-primary btn-sm">Ajouter</button>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card h-100">
<img src="public/ordinateur-portable-laptop.webp" class="card-img-top" alt="Produit">
<div class="card-body">
<h5 class="card-title">Pack Découverte</h5>
<p class="card-text text-muted">Description courte du produit</p>
<div class="d-flex justify-content-between align-items-center">
<span class="h5 text-primary mb-0">99,99€</span>
<button class="btn btn-outline-primary btn-sm">Ajouter</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Télécharger le fichier source