<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <section class="pt-5 pb-5 mt-0 align-items-center d-flex bg-dark" style="height:100vh; background-size: cover; background-image: url(https://images.unsplash.com/photo-1525130413817-d45c1d127c42?ixlib=rb-0.3.5&s=c3d0603820b595592d80f5a239938c67&auto=format&fit=crop&w=1500&q=80);"> <div class="container-fluid"> <div class="row justify-content-center align-items-center d-flex text-center h-100"> <div class="col-12 col-md-8 h-50 "> <h1 class="display-2 text-light mb-2 mt-5"><strong>Align Center</strong> </h1> <p class="lead text-light mb-5">Sub-heading. Header 100% height with center align items</p> <p><a href="http://bootstraptor.com" class="btn bg-primary btn-round text-light btn-lg btn-rised">Get Started Now ></a></p> <div class="btn-container-wrapper p-relative d-block zindex-1"> <a class="btn btn-link btn-lg mt-md-3 mb-4 scroll align-self-center text-light" href="http://bootstraptor.com"> <i class="fa fa-angle-down fa-4x text-light"></i> </a> </div> </div> </div> </div> </section>