Bootstrap 5 cover header snippet example

Navbar Bootstrap 5Free

Bootstrap 5 cover header snippet example: a hand-crafted, open-source Bootstrap 5 navbar. HTML included, ready to copy.

6.8k views101 downloads6 years ago

gosnippets.com/preview/bootstrap-5-cover-header-snippet-example

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>

More Navbar snippets

Responsive Sidebar Navigation for Dashboard

Responsive Sidebar Navigation for Dashboard: a hand-crafted, open-source Bootstrap 5 navbar. HTML & CSS included, ready to copy.

NavbarView →

Bootstrap Transparent navbar example

Bootstrap Transparent navbar example — a free Bootstrap 5 navbar snippet. Copy the HTML, CSS & JS and paste straight into your Bootstrap 5 project.

NavbarView →

Bootstrap 5 e-commerce navigation with product snippet

Bootstrap 5 e-commerce navigation with product snippet: a hand-crafted, open-source Bootstrap 5 navbar. HTML & CSS included, ready to copy.

NavbarView →

Comments(0)

No comments yet — be the first to start the discussion.

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>