<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row blog-row"> <h1 class="text-center margin_bottom30">Latest Blog</h1> <div class="col-md-6 col-sm-6 col-xs-12 margin_bottom30"> <a href="javascript::;"> <img class="img-responsive center-block" src="http://i50.tinypic.com/2nbf0ht.jpg" height="250"> </a> <div class="blog-content bg-white"> <h3>Blog Title Comes Here</h3> <p>Category : <a href="javascript::;">Nature</a></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec mauris sit amet mi posuere imperdiet. Sed congue velit placerat sapien gravida sagittis. Phasellus in convallis urna, sit amet sollicitudin augue. Nullam vel est a neque lobortis iaculis....<a href="javascript::;" class="heading_color"> Continue Reading</a></p> <hr> <p><span>Share : <a href="javascript::;"><i class="fa fa-facebook margin_left10" aria-hidden="true"></i></a> <a href="javascript::;"><i class="fa fa-twitter margin_left10" aria-hidden="true"></i></a> <a href="javascript::;"><i class="fa fa-google-plus margin_left10" aria-hidden="true"></i></a> </span> <span class="pull-right">By : <strong>Blogger</strong></span> </p> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12 margin_bottom30"> <a href="javascript::;"> <img class="img-responsive center-block" src="http://i50.tinypic.com/2nbf0ht.jpg"> </a> <div class="blog-content bg-white"> <h3>Blog Title Comes Here</h3> <p>Category : <a href="javascript::;">Nature</a></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec mauris sit amet mi posuere imperdiet. Sed congue velit placerat sapien gravida sagittis. Phasellus in convallis urna, sit amet sollicitudin augue. Nullam vel est a neque lobortis iaculis....<a href="javascript::;" class="heading_color"> Continue Reading</a></p> <hr> <p><span>Share : <a href="javascript::;"><i class="fa fa-facebook margin_left10" aria-hidden="true"></i></a> <a href="javascript::;"><i class="fa fa-twitter margin_left10" aria-hidden="true"></i></a> <a href="javascript::;"><i class="fa fa-google-plus margin_left10" aria-hidden="true"></i></a> </span> <span class="pull-right">By : <strong>Blogger</strong></span> </p> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12 margin_bottom30"> <a href="javascript::;"> <img class="img-responsive center-block" src="http://i50.tinypic.com/2nbf0ht.jpg"> </a> <div class="blog-content bg-white"> <h3>Blog Title Comes Here</h3> <p>Category : <a href="javascript::;">Nature</a></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec mauris sit amet mi posuere imperdiet. Sed congue velit placerat sapien gravida sagittis. Phasellus in convallis urna, sit amet sollicitudin augue. Nullam vel est a neque lobortis iaculis....<a href="javascript::;" class="heading_color"> Continue Reading</a></p> <hr> <p><span>Share : <a href="javascript::;"><i class="fa fa-facebook margin_left10" aria-hidden="true"></i></a> <a href="javascript::;"><i class="fa fa-twitter margin_left10" aria-hidden="true"></i></a> <a href="javascript::;"><i class="fa fa-google-plus margin_left10" aria-hidden="true"></i></a> </span> <span class="pull-right">By : <strong>Blogger</strong></span> </p> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12 margin_bottom30"> <a href="javascript::;"> <img class="img-responsive center-block" src="http://i50.tinypic.com/2nbf0ht.jpg"> </a> <div class="blog-content bg-white"> <h3>Blog Title Comes Here</h3> <p>Category : <a href="javascript::;">Nature</a></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec mauris sit amet mi posuere imperdiet. Sed congue velit placerat sapien gravida sagittis. Phasellus in convallis urna, sit amet sollicitudin augue. Nullam vel est a neque lobortis iaculis....<a href="javascript::;" class="heading_color"> Continue Reading</a></p> <hr> <p><span>Share : <a href="javascript::;"><i class="fa fa-facebook margin_left10" aria-hidden="true"></i></a> <a href="javascript::;"><i class="fa fa-twitter margin_left10" aria-hidden="true"></i></a> <a href="javascript::;"><i class="fa fa-google-plus margin_left10" aria-hidden="true"></i></a> </span> <span class="pull-right">By : <strong>Blogger</strong></span> </p> </div> </div> </div> </div> <script src="https://use.fontawesome.com/1dec14be15.js"></script>

body { background-color:#ddd; } .blog-row {margin-top:50px; } .margin_bottom30 { margin-bottom:30px; } .margin_left10 {margin-left:10px; } .blog-content {padding:10px; } .bg-white {background-color:#fff;}