<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="container"> <div class="row"> <div class="col-sm-4 col-xs-6"> <div class="media"> <a class="media-left media-middle" href="#"> <img src="img/13.png"> </a> <div class="media-body"> <h4 class="media-heading">Do more beautiful stuff</h4> <p> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate</p> </div> </div> </div> <div class="col-sm-4 col-xs-6"> <div class="media"> <a class="media-left media-middle" href="#"> <img src="img/14.png"> </a> <div class="media-body"> <h4 class="media-heading">Make your media object shine</h4> <p> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate </p> </div> </div> </div> <div class="col-sm-4 col-xs-6"> <div class="media"> <a class="media-left media-middle" href="#"> <img src="img/15.png"> </a> <div class="media-body"> <h4 class="media-heading">Simple line icons are used</h4> <p> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate </p> </div> </div> </div> <div class="col-sm-4 col-xs-6"> <div class="media"> <a class="media-left media-middle" href="#"> <img src="img/16.png"> </a> <div class="media-body"> <h4 class="media-heading">Make it simple and clean</h4> <p> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate </p> </div> </div> </div> <div class="col-sm-4 col-xs-6"> <div class="media"> <a class="media-left media-middle" href="#"> <img src="img/17.png"> </a> <div class="media-body"> <h4 class="media-heading">Make it simple and clean</h4> <p> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate </p> </div> </div> </div> <div class="col-sm-4 col-xs-6"> <div class="media"> <a class="media-left media-middle" href="#"> <img src="img/18.png"> </a> <div class="media-body"> <h4 class="media-heading">Make it simple and clean</h4> <p> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate </p> </div> </div> </div> </div> </div>

.media { padding-top: 40px; } .media a:hover, .media a:focus { text-decoration: none; outline: none; } .media .media-left .icon { display: block; width: 80px; height: 80px; padding: 16px 6px; color: #f0f0f0; text-align: center; border-radius: 50%; } .media .media-left .icon::before { font-size: 44px; }