Bootstrap 5 cover header snippet example

Loading…

Bootstrap 5 cover header snippet example | GoSnippets

Source Code

1<section class="pt-5 pb-5 mt-0 align-items-center d-flex bg-dark" style="min-height: 100vh; background-size: cover; background-image: url("https://images.unsplash.com/photo-1517216015940-049a2d4e2da4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=14035a7d76df29c4697de036fcd005ce");">
2    <div class="container ">
3      <div class="row align-items-center d-flex justify-content-between">
4        <div class="col-12 col-md-6 pb-5 order-2 order-sm-2 ">
5          <h1 class="  text-white font-weight-bold mb-3 mt-5 display-3">Win Your Market.</h1>
6          <p class="lead text-white">A collection of coded HTML and CSS elements to help your build your new website. Clean design, fully responsive and based on Bootstrap 4.</p>
7          <div class=" d-flex mt-3 mb-1">
8            <a class="btn btn-primary btn-raised text-uppercase btn-lg  mt-md-3 " href="#" role="button">Download Now</a>
9          </div>
10        </div>
11        <div class="col-12 col-md-6 order-sm-1 order-md-2  ">
12          <div class="icon-wrap text-primary d-flex justify-content-md-center my-3">
13            <button href="#" class="icon d-flex border-0 align-items-center justify-content-center bg-white text-dark shadow-lg rounded-circle " style="width:70px; height:70px">
14              <i class=" fa fa-play fa-lg ms-1"></i>
15            </button>
16          </div>
17        </div>
18      </div>
19    </div>
20</section>

Bootstrap 5 cover header snippet example

Source Code

More Navbar snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery