"Box with title and description"
Bootstrap 4.1.1 Snippet by mastersujit7

<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 ----------> <section class="why-edit"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="why-edit-box"> <h3>Heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum elementum turpis. Suspendisse eu purus gravida, imperdiet urna ac, malesuada mauris. Vivamus pharetra libero orci.</p> <img src="https://www.researchedit.org/public/images/book-icon.png" alt="Book Icon"> </div> </div> <div class="col-md-4"> <div class="why-edit-box"> <h3>Heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum elementum turpis. Suspendisse eu purus gravida, imperdiet urna ac, malesuada mauris. Vivamus pharetra libero orci.</p> <img src="https://www.researchedit.org/public/images/book-icon.png" alt="Book Icon"> </div> </div> <div class="col-md-4"> <div class="why-edit-box"> <h3>Heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum elementum turpis. Suspendisse eu purus gravida, imperdiet urna ac, malesuada mauris. Vivamus pharetra libero orci.</p> <img src="https://www.researchedit.org/public/images/book-icon.png" alt="Book Icon"> </div> </div> <div class="col-md-4"> <div class="why-edit-box"> <h3>Heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum elementum turpis. Suspendisse eu purus gravida, imperdiet urna ac, malesuada mauris. Vivamus pharetra libero orci.</p> <img src="https://www.researchedit.org/public/images/book-icon.png" alt="Book Icon"> </div> </div> <div class="col-md-4"> <div class="why-edit-box"> <h3>Heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum elementum turpis. Suspendisse eu purus gravida, imperdiet urna ac, malesuada mauris. Vivamus pharetra libero orci.</p> <img src="https://www.researchedit.org/public/images/book-icon.png" alt="Book Icon"> </div> </div> <div class="col-md-4"> <div class="why-edit-box"> <h3>Heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum elementum turpis. Suspendisse eu purus gravida, imperdiet urna ac, malesuada mauris. Vivamus pharetra libero orci.</p> <img src="https://www.researchedit.org/public/images/book-icon.png" alt="Book Icon"> </div> </div> </div> </div> </section>
.why-edit { margin:40px 0; background-image:url(../images/pentagon.jpg); height:auto; background-attachment:fixed; background-position:top; background-repeat:no-repeat; background-size:cover; padding:97px 0; background:#aed8f0; } .why-edit-box { background:#fff; padding:37px; box-shadow:0 0 10px 0 #ddd; margin-bottom:30px; height:100% } .why-edit-box img { position:absolute; bottom:0; right:37px; width:137px; opacity:.1 } .why-edit-box h3 { margin:0; padding-top:10px; line-height: 1.1em; color: #14365C; font-family: 'Open Sans',Arial,sans-serif; font-weight: 600; } .why-edit-box h3::after { position:absolute; content:''; height:10px; margin:0 auto; left:0; top:9%; width:50%; background:#f79418 } .why-edit-box p { margin: 0; margin-top: 0px; font-size: 15px; line-height: 26px; margin-top: 20px; } .why-edit .row .col-md-4 { margin-bottom: 30px; }

Related: See More


Questions / Comments: