<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 ----------> <!--- Start Landing Page Image --> <div class="landing"> <div class="home-wrap"> <div class="home-inner"> </div> </div> </div> <!--- End Landing Page Image --> <!--- Start Landing Page Caption --> <div class="caption center-block text-center"> <h3>Nest Responsive Bootstrap Theme</h3> <a class="btn btn-outline-light" href="#about">Get Started</a> </div> <!--- End Landing Page Caption --> <!--- End Home Section -->

/*============= LANDING PAGE =============*/ .home-inner { background-image: url('img/landing.png'); } .caption { width: 100%; max-width: 100%; position: absolute; top: 40%; z-index: 1; } .caption h3 { color: white; font-size: 2.4rem; text-transform: uppercase; padding-bottom: 2rem; } .btn { border-width: medium; border-radius: 0; padding: .5rem 1.1rem; font-size: .9rem; text-transform: uppercase; }