Full screen hero example with background

Build a stunning website that attract visitors

Get started

    <!--::Start 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/bg6.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">
                    <!--:Heading:-->
                    <h1 class="display-2 mb-4">Full screen hero example with background</h1>
                    <!--:subheading:-->
                    <p class="lead mb-5">Build a stunning website that attract visitors</p>
                    <!--:Action button-->
                    <a href="#next" class="btn btn-outline-white btn-lg px-4 px-lg-5 rounded-pill btn-rise">
                    <div class="btn-rise-bg bg-white"></div>
                    <div class="btn-rise-text">Get started</div>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <!--::/End Hero fullscreen::-->

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