Bootstrap five hero banner snipp example v02

Bootstrap five hero banner snipp example v02

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="bootstrap.css" rel="stylesheet">-->

<title>Hero banner snipp</title>
.shape.rellax {
    z-index: 1;

.shape.rellax {
    position: absolute;
.bg-soft-primary {
    background-color: #f1f5fd!important;    
.bg-dot.primary {
    background-image: radial-gradient(#3f78e0 2px,transparent 2.5px);

.shape.rellax {
    position: absolute;
.bg-dot {
    background-size: 0.75rem 0.75rem;
.bg-dot, .bg-line {
    opacity: .4;
.h-19 {
    height: 9rem!important;
.w-17 {
    width: 7rem!important;

<section class="py-5 bg-white">
  <div class="container">
    <div class="row gx-5 mb-5 mb-md-3 mb-lg-5 align-items-center">
      <div class="col-md-8 offset-md-2 col-lg-6 offset-lg-1 position-relative order-lg-2">
        <div class="shape bg-dot primary rellax w-17 h-19" style="top: -1.7rem; left: -1.5rem;"></div>
        <div class="shape rounded bg-soft-primary rellax d-md-block" style="bottom: -1.8rem; right:1.7rem; width: 85%; height: 90%;"></div>
        <figure class="position-relative" style="z-index:2;"><img src="" class="rounded" alt="" /></figure>
      <!--/column -->
      <div class="col-lg-5 text-center text-lg-start">
        <h1 class="display-5 mb-4 mt-5 mt-lg-0">We bring solutions to make life easier for our customers.</h1>
        <p class="lead px-md-5 px-lg-0 mb-5">We have considered our solutions to support every stage of your growth.</p>
        <div class="d-flex justify-content-center justify-content-lg-start">
          <span><a href="#" class="btn btn-primary rounded-pill px-5 py-2 me-3">Explore Now</a></span>
          <span><a href="#" class="btn btn-outline-primary rounded-pill px-5 py-2">Free Trial</a></span>
      <!--/column -->
    <!-- /.row -->
<!-- /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