Full screen hero example with background

Build a stunning website that attract visitors

Get started
                
<!--Hero fullscreen-->
<section class="position-relative vh-100 d-flex align-items-center bg-dark text-white">
 <!--Hero background-image-->
 <img src="assets/img/backgrounds/bg7.jpg" alt="" class="bg-image opacity-50">
 <div class="container position-relative py-5">
 <div class="row">
 <div class="col-xl-9 mx-auto text-center">
    <!--Hero heading-->
    <h1 class="display-2 mb-4">Full screen hero example with background</h1>
       <!--Hero subheading-->
       <p class="lead mb-5">Build a stunning website that attract visitors</p>
       <!--Hero action button-->
       <a href="#next" class="btn btn-outline-white btn-lg rounded-pill btn-rise">
         <div class="btn-rise-bg bg-white"></div>
         <div class="btn-rise-text">Get started</div>
       </a>
     </div>
   </div>
   <!--/.row-->
 </div>
 <!--/.content-->
</section>

                
  <!-- Bootstrap + Vendor + Theme -->
  <link href="assets/css/theme.min.css" rel="stylesheet">

                
  <!-- Bootstrap + Vendor + Theme -->
  <script src="assets/css/theme.bundle.js"></script>

Let's start building

Stunning websites ease