Bootstrap five hero banner snipp example v07
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="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet">
<title>Hero banner snipp</title>
<style>
@media screen and (max-width: 992px) {
.nn {
top:90% !important;
right:0% !important;
}
}
</style>
</head>
<body>
<section class="wrapper bg-light pt-5">
<div class="container py-5 position-relative">
<div class="row gx-5 align-items-center">
<div class="col-md-10 col-lg-5 ps-xxl-12 text-center text-lg-start">
<h1 class="display-5 mb-4">Get all of your steps, exercise, sleep and meds in one place.</h1>
<p class="lead mb-5 px-md-5 px-lg-0">Sandbox is now available to download from both the App Store and Google Play Store.</p>
<div class="d-flex justify-content-center justify-content-lg-start">
<span><a class="btn btn-primary btn-lg rounded mx-2 px-4"><i class="lni lni-app-store me-2"></i> App Store</a></span>
<span><a class="btn btn-success btn-lg rounded mx-2 px-4"><i class="lni lni-play-store me-2"></i> Google Play</a></span>
</div>
</div>
<!-- /column -->
</div>
<img class="position-absolute col-12 col-lg-10 col-xl-11 col-xxl-10 px-lg-5 nn" src="https://bootstraplily.com/wp-content/uploads/2021/11/112.png" alt="" style="top: -1%; right: -17%;" />
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
</body>
</html>
jsfiddle example
