"basic banner"
Bootstrap 4.1.1 Snippet by SANTANU CHOWDHURY

<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="banner mb30" style="background-image:url('http://eventophotography.com/demo/kgl/img/banner2.jpg');"> <div class="banner-content"> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-8"> <span>kolkata gemological laboratory</span> <h1>Colored Stone Report</h1> <p>KGL grades the widest variety of gemstones and jewelry in more corners of the world than any other gemological organization.</p> </div> <div class="col-md-6 col-sm-4"> <img src="http://eventophotography.com/demo/kgl/img/banner-ring.png" class="img-responsive banner-img"> </div> </div> </div> </div> </div>
/* less ------------------------ .banner{ background-color:#f2dfce; height: 90%; min-height: 90%; position: relative; overflow: hidden; background-size: contain; background-position: center; .banner-content { position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -40%); span{ text-transform: uppercase; color: #e29b52; font-size: 14px; font-weight: 500; } h1 { font-size: 55px; margin-bottom: 15px; margin-top: 5px; letter-spacing: -.9px; } p { font-size: 22px; font-weight: 300; line-height: 1.4; letter-spacing: -0.5px; } .banner-img{ position: absolute; top: 50%; width: 500px; left: 50%; transform: translate(-50%,-30%); } } } */ .banner { background-color: #f2dfce; height: 90%; min-height: 90%; position: relative; overflow: hidden; background-size: contain; background-position: center; } .banner .banner-content { position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -40%); } .banner .banner-content span { text-transform: uppercase; color: #e29b52; font-size: 14px; font-weight: 500; } .banner .banner-content h1 { font-size: 55px; margin-bottom: 15px; margin-top: 5px; letter-spacing: -0.9px; } .banner .banner-content p { font-size: 22px; font-weight: 300; line-height: 1.4; letter-spacing: -0.5px; } .banner .banner-content .banner-img { position: absolute; top: 50%; width: 500px; left: 50%; transform: translate(-50%, -30%); }

Related: See More


Questions / Comments: