Bootstrap five hero banner snipp example v04
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"> <title>Hero banner snipp</title> <style> .min-vh-70 { min-height:70vh !important; } .bg-cover { background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: scroll!important; position:absolute; right:0; } .min-vh-50 { min-height: 50vh!important; } @media(max-width: 991.98px){ .bg-cover{ position:relative; } } </style> </head> <body> <section class="bg-light position-relative min-vh-70 d-lg-flex align-items-center"> <div class="rounded col-lg-6 order-lg-2 bg-cover h-100 min-vh-50" style="background-image:url(https://bootstraplily.com/wp-content/uploads/2021/11/about16.jpg)"> </div> <!--/column --> <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="mt-5 px-5 text-center text-lg-start"> <h1 class="display-4 mb-4">Just sit & relax while we take care of your business needs.</h1> <p class="lead mb-5">We make your spending stress-free for you to have the perfect control.</p> <div class="d-flex justify-content-center justify-content-lg-start mb-5"> <a href="#" class="btn btn-lg btn-primary rounded-pill me-2 px-5">Explore Now</a> <a href="#" class="btn btn-lg btn-outline-primary rounded-pill px-5">Contact Us</a> </div> </div> <!--/div --> </div> <!--/column --> </div> <!--/.row --> </div> <!-- /.container --> </section> <!-- /section --> </body> </html>
jsfiddle example