Bootstrap five hero banner snipp example v04

Bootstrap five hero banner snipp example v04

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

<title>Hero banner snipp</title>
.min-vh-70 {
    min-height:70vh !important;
.bg-cover {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll!important;
.min-vh-50 {
    min-height: 50vh!important;
@media(max-width: 991.98px){

<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(">
  <!--/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 -->
      <!--/column -->
    <!--/.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