Hero Section
Bootstrap 5
Responsive
Html
Css
Landing Page
Call To Action
Snippet
Background
Design
Composant
Full Screen
Section hero Bootstrap 5 avec background plein écran, titre accrocheur, sous-titre et call-to-action. Design responsive et moderne pour landing pages et sites.
<!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 Header Hero Bg Bootstrap5 2026 05050001 | 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>
<header class="hero-section text-white text-center d-flex align-items-center"
style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('public/bg1.webp') center/cover no-repeat; min-height: 100vh;">
<div class="container">
<h1 class="display-3 fw-bold mb-4">Bienvenue sur Notre Site</h1>
<p class="lead mb-5">Découvrez des solutions innovantes pour votre entreprise</p>
<a href="#" class="btn btn-primary btn-lg px-5 me-3">Commencer</a>
<a href="#" class="btn btn-outline-light btn-lg px-5">En savoir plus</a>
</div>
</header>
<!-- 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