Bootstrap five hero banner snipp example v07

Bootstrap five hero banner snipp example v07

bootstrap hero banner snipp

Whole html/css code

<!doctype html>
<html lang="en">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="" rel="stylesheet">
<link href="" rel="stylesheet">

<title>Hero banner snipp</title>
@media screen and (max-width: 992px) {
  .nn {
   top:90% !important;
   right:0% !important;

<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>
      <!-- /column -->
    <img class="position-absolute col-12 col-lg-10 col-xl-11 col-xxl-10 px-lg-5 nn" src="" alt="" style="top: -1%; right: -17%;" />
    <!-- /.row -->
  <!-- /.container -->
<!-- /section -->


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