Bootstrap 5 Hero Section Component
The hero section is responsive and uses the Bootstrap 5 framework. The hero section features a background image, overlay, callout buttons, and an excellent mouse hover effect.
<!-- Hero 1 - HCF Bootstrap 5 Component -->
<section class="px-5 py-6 py-xxl-10 hcf-bp-center hcf-bs-cover hcf-overlay hcf-transform" style="background-image: url('./assets/img/heroes/hero-1/hero-main.jpg');">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-12 col-md-11 col-lg-9 col-xl-7 col-xxl-6 text-center text-white">
<h1 class="display-3 fw-bold mb-3">Art of Design</h1>
<p class="lead mb-5">Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<button type="button" class="btn btn-light btn-lg px-4 gap-3">Free Consultation</button>
<button type="button" class="btn btn-outline-light btn-lg px-4">Buy Credits</button>
</div>
</div>
</div>
</div>
</section>.mb-6 {
margin-bottom: 4.5rem !important;
}
.mb-7 {
margin-bottom: 6rem !important;
}
.mb-8 {
margin-bottom: 7.5rem !important;
}
.mb-9 {
margin-bottom: 9rem !important;
}
.mb-10 {
margin-bottom: 10.5rem !important;
}
.py-6 {
padding-top: 4.5rem !important;
padding-bottom: 4.5rem !important;
}
.py-7 {
padding-top: 6rem !important;
padding-bottom: 6rem !important;
}
.py-8 {
padding-top: 7.5rem !important;
padding-bottom: 7.5rem !important;
}
.py-9 {
padding-top: 9rem !important;
padding-bottom: 9rem !important;
}
.py-10 {
padding-top: 10.5rem !important;
padding-bottom: 10.5rem !important;
}
.hcf-bp-center {
background-position: center !important;
}
.hcf-bs-cover {
background-size: cover !important;
}
@media (min-width: 576px) {
.mb-sm-6 {
margin-bottom: 4.5rem !important;
}
.mb-sm-7 {
margin-bottom: 6rem !important;
}
.mb-sm-8 {
margin-bottom: 7.5rem !important;
}
.mb-sm-9 {
margin-bottom: 9rem !important;
}
.mb-sm-10 {
margin-bottom: 10.5rem !important;
}
.py-sm-6 {
padding-top: 4.5rem !important;
padding-bottom: 4.5rem !important;
}
.py-sm-7 {
padding-top: 6rem !important;
padding-bottom: 6rem !important;
}
.py-sm-8 {
padding-top: 7.5rem !important;
padding-bottom: 7.5rem !important;
}
.py-sm-9 {
padding-top: 9rem !important;
padding-bottom: 9rem !important;
}
.py-sm-10 {
padding-top: 10.5rem !important;
padding-bottom: 10.5rem !important;
}
}
@media (min-width: 768px) {
.mb-md-6 {
margin-bottom: 4.5rem !important;
}
.mb-md-7 {
margin-bottom: 6rem !important;
}
.mb-md-8 {
margin-bottom: 7.5rem !important;
}
.mb-md-9 {
margin-bottom: 9rem !important;
}
.mb-md-10 {
margin-bottom: 10.5rem !important;
}
.py-md-6 {
padding-top: 4.5rem !important;
padding-bottom: 4.5rem !important;
}
.py-md-7 {
padding-top: 6rem !important;
padding-bottom: 6rem !important;
}
.py-md-8 {
padding-top: 7.5rem !important;
padding-bottom: 7.5rem !important;
}
.py-md-9 {
padding-top: 9rem !important;
padding-bottom: 9rem !important;
}
.py-md-10 {
padding-top: 10.5rem !important;
padding-bottom: 10.5rem !important;
}
}
@media (min-width: 992px) {
.mb-lg-6 {
margin-bottom: 4.5rem !important;
}
.mb-lg-7 {
margin-bottom: 6rem !important;
}
.mb-lg-8 {
margin-bottom: 7.5rem !important;
}
.mb-lg-9 {
margin-bottom: 9rem !important;
}
.mb-lg-10 {
margin-bottom: 10.5rem !important;
}
.py-lg-6 {
padding-top: 4.5rem !important;
padding-bottom: 4.5rem !important;
}
.py-lg-7 {
padding-top: 6rem !important;
padding-bottom: 6rem !important;
}
.py-lg-8 {
padding-top: 7.5rem !important;
padding-bottom: 7.5rem !important;
}
.py-lg-9 {
padding-top: 9rem !important;
padding-bottom: 9rem !important;
}
.py-lg-10 {
padding-top: 10.5rem !important;
padding-bottom: 10.5rem !important;
}
}
@media (min-width: 1200px) {
.mb-xl-6 {
margin-bottom: 4.5rem !important;
}
.mb-xl-7 {
margin-bottom: 6rem !important;
}
.mb-xl-8 {
margin-bottom: 7.5rem !important;
}
.mb-xl-9 {
margin-bottom: 9rem !important;
}
.mb-xl-10 {
margin-bottom: 10.5rem !important;
}
.py-xl-6 {
padding-top: 4.5rem !important;
padding-bottom: 4.5rem !important;
}
.py-xl-7 {
padding-top: 6rem !important;
padding-bottom: 6rem !important;
}
.py-xl-8 {
padding-top: 7.5rem !important;
padding-bottom: 7.5rem !important;
}
.py-xl-9 {
padding-top: 9rem !important;
padding-bottom: 9rem !important;
}
.py-xl-10 {
padding-top: 10.5rem !important;
padding-bottom: 10.5rem !important;
}
}
@media (min-width: 1400px) {
.mb-xxl-6 {
margin-bottom: 4.5rem !important;
}
.mb-xxl-7 {
margin-bottom: 6rem !important;
}
.mb-xxl-8 {
margin-bottom: 7.5rem !important;
}
.mb-xxl-9 {
margin-bottom: 9rem !important;
}
.mb-xxl-10 {
margin-bottom: 10.5rem !important;
}
.py-xxl-6 {
padding-top: 4.5rem !important;
padding-bottom: 4.5rem !important;
}
.py-xxl-7 {
padding-top: 6rem !important;
padding-bottom: 6rem !important;
}
.py-xxl-8 {
padding-top: 7.5rem !important;
padding-bottom: 7.5rem !important;
}
.py-xxl-9 {
padding-top: 9rem !important;
padding-bottom: 9rem !important;
}
.py-xxl-10 {
padding-top: 10.5rem !important;
padding-bottom: 10.5rem !important;
}
}
.hcf-overlay {
--hcf-overlay-opacity: 0.5;
--hcf-overlay-bg-color: var(--bs-black-rgb);
position: relative;
}
.hcf-overlay::after {
display: block;
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(
var(--hcf-overlay-bg-color),
var(--hcf-overlay-opacity)
);
z-index: 0;
}
.hcf-overlay > * {
position: relative;
z-index: 1;
}
.hcf-transform {
transform: scale3d(1, 1, 1);
transform-style: preserve-3d;
transition: all 0.5s;
}
.hcf-transform:hover {
transform: scale3d(1.02, 1.02, 1.02);
}Bootstrap 5 Hero Section Snippet
Our hero section is easy to use for your Bootstrap 5 project. This hero section is responsive, having text, images, and buttons.