<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 href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&family=Sacramento&display=swap" rel="stylesheet"> <section> <div class="container mt-4"> <div class="row"> <!--first section--> <div class="col-md-4 col-lg-4 col-xl-4"> <h1 style="font-family: 'Sacramento', cursive;font-size: xxx-large;">A Bootstrap Guide</h1> <p style="font-family: 'Montserrat', sans-serif;font-weight: 600;color: #5a5a5a;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <div class="jumbotron mt-4 bg-primary"> <img src="https://i.pinimg.com/564x/26/12/73/261273da88b3732c008a871d0284642b--men-photography-portrait-male-photography.jpg" alt="image1" class="img-fluid w-75"> <div class="text-over1"><p>Image 1</p></div> </div> </div> <!--second section--> <div class="col-md-4 col-lg-4 col-xl-4"> <div class="jumbotron mt-5 bg-warning"> <img src="https://mymodernmet.com/wp/wp-content/uploads/2018/10/Mou-Aysha-portrait-photography-3.jpg" alt="image1" class="img-fluid w-75"> </div> <div class="text-over2"><p>Image 2</p></div> </div> <!--third section--> <div class="col-md-4 col-lg-4 col-xl-4"> <div class="jumbotron bg-primary"> <img src="https://pbs.twimg.com/media/DzbE02-U8AAQnZB.jpg" alt="image1" class="img-fluid w-75"> </div> <div class="text-over3"><p>Image 3</p></div> </div> </div> </div> </section>

.icon-class { width: 10px; margin-right: 5px;} .img-fluid { outline: 4px solid white; outline-offset: -16px; position: absolute;} .jumbotron { padding: 2rem 2rem; height: 500px;} .text-over1 { position: absolute; font-family: 'Sacramento', cursive; font-size: 75px; bottom: 4pc; color: white; background-image: linear-gradient(to bottom right, #117a8b61, yellow); width: 75%; text-align: center;} .text-over2 { position: absolute; font-family: 'Sacramento', cursive; font-size: 75px; bottom: 162px; color: white; background-image: linear-gradient(to bottom right, #117a8b61, yellow); width: 76%; text-align: center; left: 45px;} .text-over3 { position: absolute; font-family: 'Sacramento', cursive; font-size: 75px; bottom: 210px; left: 47px; color: white; background-image: linear-gradient(to bottom right, #117a8b61, yellow); width: 75%; text-align: center;}