Bootstrap five hero banner snipp example v01

Bootstrap five hero banner snipp example v01

hero banner snipp

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>

</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

Spread the love

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top