<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 ----------> <!-- Product Showcase Grid --> <section class="wrapper wrapper-product-showcase text-center d-flex align-items-center"> <div class="container-fluid"> <div class="row"> <div class="container text-left position-relative" data-aos="fade-in" data-aos-delay="200" > <h1 class="text-white">Voice</h1> <p class="text-white">a long established fact that a reader will be distracted by the readable content <br/>of a page when looking at its layout. <br/>The point of using Lorem Ipsum</p> </div> </div> </div> </section> <!-- End Product Showcase Grid --> <!-- Product Showcase Grid2 --> <section class="wrapper wrapper-product-showcase2 text-center d-flex align-items-center"> <div class="container-fluid"> <div class="row"> <div class="container text-left position-relative" data-aos="fade-in" data-aos-delay="200" > <h1 class="text-white">Voice2</h1> <p class="text-white">a long established fact that a reader will be distracted by the readable content <br/>of a page when looking at its layout. <br/>The point of using Lorem Ipsum</p> </div> </div> </div> </section> <!-- End Product Showcase Grid --> <div class="container"> <div class="row"> <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="gallery" class="col-md-3"> <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid rounded"> </a> <a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="gallery" class="col-md-3"> <img src="https://unsplash.it/600.jpg?image=252" class="img-fluid rounded"> </a> <a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="gallery" class="col-md-3"> <img src="https://unsplash.it/600.jpg?image=253" class="img-fluid rounded"> </a> <a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="gallery" class="col-md-3"> <img src="https://unsplash.it/600.jpg?image=253" class="img-fluid rounded"> </a> </div> </div>

.wrapper-product-showcase{ background-color:#c00000; } .wrapper-product-showcase2{ background-color:#808080; }