<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 ----------> <div class="mainHeader homeHeader"> <div class="container"> <div class="row"> <div class="col-xs-12 clearfix"> <h1 class="pageTitle">High quality Bootstrap themes & templates for your next web project.</h1> <div class="btnGroup"> <a class="btn btn-success btn-lg" href="/themes"><i class="fa fa-line-chart"></i> Trending themes</a> <a class="btn btn-success btn-lg" href="/themes?sort=date"><i class="fa fa-bullhorn"></i> Latest themes</a> </div> </div> </div> </div> </div>

.homeHeader { text-align: center; padding: 50px 0; } .mainHeader { padding: 34px 0; /* background: url(../img/color29.jpg) no-repeat scroll center center / cover #00467f; */ background: url(https://bootstrapbay.com/assets/img/color29.jpg) no-repeat fixed center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; color: #fff; margin-bottom: 30px; } .mainHeader h1.pageTitle { font-size: 48px; font-weight: 700; line-height: 1.2; margin: 0 0 40px; } .mainHeader h1 { font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0; font-size: 34px; font-weight: 300; }