Bootstrap five hero banner snipp example v02
Whole html/css code
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!--<link href="bootstrap.css" rel="stylesheet">-->
<title>Hero banner snipp</title>
<style>
.shape.rellax {
z-index: 1;
}
.shape.rellax {
position: absolute;
}
.bg-soft-primary {
background-color: #f1f5fd!important;
}
.bg-dot.primary {
background-image: radial-gradient(#3f78e0 2px,transparent 2.5px);
}
.shape.rellax {
position: absolute;
}
.bg-dot {
background-size: 0.75rem 0.75rem;
}
.bg-dot, .bg-line {
opacity: .4;
}
.h-19 {
height: 9rem!important;
}
.w-17 {
width: 7rem!important;
}
</style>
</head>
<body>
<section class="py-5 bg-white">
<div class="container">
<div class="row gx-5 mb-5 mb-md-3 mb-lg-5 align-items-center">
<div class="col-md-8 offset-md-2 col-lg-6 offset-lg-1 position-relative order-lg-2">
<div class="shape bg-dot primary rellax w-17 h-19" style="top: -1.7rem; left: -1.5rem;"></div>
<div class="shape rounded bg-soft-primary rellax d-md-block" style="bottom: -1.8rem; right:1.7rem; width: 85%; height: 90%;"></div>
<figure class="position-relative" style="z-index:2;"><img src="https://bootstraplily.com/wp-content/uploads/2021/11/about8.jpg" class="rounded" alt="" /></figure>
</div>
<!--/column -->
<div class="col-lg-5 text-center text-lg-start">
<h1 class="display-5 mb-4 mt-5 mt-lg-0">We bring solutions to make life easier for our customers.</h1>
<p class="lead px-md-5 px-lg-0 mb-5">We have considered our solutions to support every stage of your growth.</p>
<div class="d-flex justify-content-center justify-content-lg-start">
<span><a href="#" class="btn btn-primary rounded-pill px-5 py-2 me-3">Explore Now</a></span>
<span><a href="#" class="btn btn-outline-primary rounded-pill px-5 py-2">Free Trial</a></span>
</div>
</div>
<!--/column -->
</div>
<!-- /.row -->
</section>
<!-- /section -->
</body>
</html>
jsfiddle example
