Bootstrap five hero banner snipp example v01
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <!--<link href="bootstrap.css" rel="stylesheet">--> <title>Hero banner snipp</title> </head> <body> <section class="bg-light"> <div class="container py-5 text-center"> <div class="row gx-lg-5 align-items-center"> <div class="col-lg-7"> <img class="img-fluid" src="https://bootstraplily.com/wp-content/uploads/2021/11/3372237.png" alt="" /> </div> <!-- /column --> <div class="col-md-10 offset-md-1 offset-lg-0 col-lg-5 text-center text-lg-start"> <h1 class="display-4 mb-4 mt-lg-0 mt-5">Grow Your Business with Our Solutions.</h1> <p class="lead mb-5">We help our clients to increase their website traffic, rankings and visibility in search results.</p> <span><a class="btn btn-primary rounded-pill px-5 py-2">Try It For Free</a></span> </div> <!-- /column --> </div> <!-- /.row --> </div> <!-- /.container --> </section> <!-- /section --> </body> </html>
jsfiddle example
