"Landing page section with item highlight"
Bootstrap 4.1.1 Snippet by anjalish

<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"> <img src="https://i.pinimg.com/564x/26/12/73/261273da88b3732c008a871d0284642b--men-photography-portrait-male-photography.jpg" alt="image1" class="img-fluid w-100"> </div> <p class="text-justify" style="font-family: 'Montserrat', sans-serif;font-weight: 600;color: #5a5a5a;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.</p> <p class="lead"><span><img class="icon-class" src="https://image.flaticon.com/icons/png/512/566/566012.png"></span><b>Read it next</b></p> </div> <!--second section--> <div class="col-md-4 col-lg-4 col-xl-4"> <div class="jumbotron mt-5"> <img src="https://mymodernmet.com/wp/wp-content/uploads/2018/10/Mou-Aysha-portrait-photography-3.jpg" alt="image1" class="img-fluid w-100"> </div> <p class="text-justify" style="font-family: 'Montserrat', sans-serif;font-weight: 600;color: #5a5a5a;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It was popularised in the 1960s.</p> <p class="lead"><span><img class="icon-class" src="https://image.flaticon.com/icons/png/512/566/566012.png"></span><b>Read it next</b></p> </div> <!--third section--> <div class="col-md-4 col-lg-4 col-xl-4"> <div class="jumbotron"> <img src="https://pbs.twimg.com/media/DzbE02-U8AAQnZB.jpg" alt="image1" class="img-fluid w-100"> </div> <p class="text-justify" style="font-family: 'Montserrat', sans-serif;font-weight: 600;color: #5a5a5a;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</p> <p class="lead"><span><img class="icon-class" src="https://image.flaticon.com/icons/png/512/566/566012.png"></span><b>Read it next</b></p> </div> </div> </div> </section>
.icon-class { width: 10px; margin-right: 5px;} .jumbotron { padding: 2rem 2rem;} .img-fluid { outline: 4px solid white; outline-offset: -16px;}

Related: See More


Questions / Comments: