<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <div class="row"> <div class="col-sm-6 col-md-6"> <div class="featured-item"> <div class="icon"> <div class="icon-style"><i class="fa fa-lemon-o"></i></div> </div> <!-- end icon --> <div class="meta-text"> <h3>Fonts Awesome</h3> <p>Description</p> </div> <!-- end .meta-text --> </div> <!-- end .featured-item --> </div> <!-- end .feature-list> .row > .col-md-6 (1st item) --> <div class="col-sm-6 col-md-6"> <div class="featured-item"> <div class="icon"> <div class="icon-style"><i class="fa fa-cog"></i></div> </div> <!-- end icon --> <div class="meta-text"> <h3>Easy Editable</h3> <p>Description</p> </div> <!-- end .meta-text --> </div> <!-- end .featured-item --> </div> <!-- end .feature-list> .row > .col-md-6 (2nd item) --> <div class="col-sm-6 col-md-6"> <div class="featured-item"> <div class="icon"> <div class="icon-style"><i class="fa fa-comment-o"></i></div> </div> <!-- end icon --> <div class="meta-text"> <h3>Free Support</h3> <p>Description</p> </div> <!-- end .meta-text --> </div> <!-- end .featured-item --> </div> <!-- end .feature-list> .row > .col-md-6 (3rd item) --> <div class="col-sm-6 col-md-6"> <div class="featured-item"> <div class="icon"> <div class="icon-style"><i class="fa fa-search"></i></div> </div> <!-- end icon --> <div class="meta-text"> <h3>Seo Friendly</h3> <p>Description</p> </div> <!-- end .meta-text --> </div> <!-- end .featured-item --> </div> <!-- end .feature-list> .row > .col-md-6 (4th item) --> <div class="col-sm-6 col-md-6"> <div class="featured-item"> <div class="icon"> <div class="icon-style"><i class="fa fa-laptop"></i></div> </div> <!-- end icon --> <div class="meta-text"> <h3>Fully Responsive</h3> <p>Description</p> </div> <!-- end .meta-text --> </div> <!-- end .featured-item --> </div> <!-- end .feature-list> .row > .col-md-6 (5th item) --> <div class="col-sm-6 col-md-6"> <div class="featured-item"> <div class="icon"> <div class="icon-style"><i class="fa fa-mobile-phone"></i></div> </div> <!-- end icon --> <div class="meta-text"> <h3>Mobile Responsive</h3> <p>Description</p> </div> <!-- end .meta-text --> </div> <!-- end .featured-item --> </div> <!-- end .feature-list> .row > .col-md-6 (6th item) --> </div> </div>

.featured-item .icon i { color: #d40000; } .featured-item .icon i { font-size: 65px; margin-top: 0px; color: #d40000; } .featured-item .meta-text { margin-left: 80px; } .featured-item .icon { width: 60px; height: 60px; float: left; }