<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <div class="col-md-4"> <div class="tab-row"> <h3 class="text-capitalize">Popular News</h3> <div class="befor-widget"> <div class="populat-post-tab"> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"> <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Popular</a> </li> <li role="presentation"> <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Latest</a> </li> <li role="presentation"> <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Comments</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home"> <div class="tab-post-list"> <div class="tab-post-list-wrap clearfix"> <div class="tab-post-thumb pull-left"> <figure> <a href="single.html"> <img src="http://placehold.it/150x150/018EBB/ffffff/?text=Popular+Post" alt="Post thumb"> </a> </figure> </div> <div class="tab-post-title"> <h6><a href="single.html">Standard Post Type</a> </h6> <span>May 10, 2014</span> </div> </div> <div class="tab-post-list-wrap clearfix"> <div class="tab-post-thumb pull-left"> <figure> <a href="single.html"> <img src="http://placehold.it/150x150/018EBB/ffffff/?text=Popular+Post" alt="Post thumb"> </a> </figure> </div> <div class="tab-post-title"> <h6><a href="single.html">Do You Know the ABC</a> </h6> <span>May 10, 2014</span> </div> </div> <div class="tab-post-list-wrap clearfix"> <div class="tab-post-thumb pull-left"> <figure> <a href="single.html"> <img src="http://placehold.it/150x150/018EBB/ffffff/?text=Popular+Post" alt="Post thumb"> </a> </figure> </div> <div class="tab-post-title"> <h6><a href="single.html">How to Handle Your Kids Mystery Ailments</a></h6> <span>May 10, 2014</span> </div> </div> </div> </div> <div role="tabpanel" class="tab-pane" id="profile"> <div class="tab-post-list"> <div class="tab-post-list-wrap clearfix"> <div class="tab-post-thumb pull-left"> <figure> <a href="single.html"> <img src="http://placehold.it/150x150/018EBB/ffffff/?text=Popular+Post" alt="Post thumb"> </a> </figure> </div> <div class="tab-post-title"> <h6><a href="single.html">Do You Know the ABC</a> </h6> <span>May 10, 2014</span> </div> </div> <div class="tab-post-list-wrap clearfix"> <div class="tab-post-thumb pull-left"> <figure> <a href="single.html"> <img src="http://placehold.it/150x150/018EBB/ffffff/?text=Popular+Post" alt="Post thumb"> </a> </figure> </div> <div class="tab-post-title"> <h6><a href="single.html">Standard Post Type</a> </h6> <span>May 10, 2014</span> </div> </div> <div class="tab-post-list-wrap clearfix"> <div class="tab-post-thumb pull-left"> <figure> <a href="single.html"> <img src="http://placehold.it/150x150/018EBB/ffffff/?text=Popular+Post" alt="Post thumb"> </a> </figure> </div> <div class="tab-post-title"> <h6><a href="single.html">How to Handle Your Kids Mystery Ailments</a></h6> <span>May 10, 2014</span> </div> </div> </div> </div> <div role="tabpanel" class="tab-pane" id="messages"> <div class="tab-post-list"> <ul> <li class="tab-post-list-wrap"> <a href="#">raazon</a> <span>on</span> <a href="#">Standard Post Type</a> <small> <abbr title="30-04-2015">12 months ago</abbr> </small> <p>Donec venenatis feugiat congue. Integer ipsum tellus, accumsan ut purus...</p> </li> <li class="tab-post-list-wrap"> <a href="#">wordpress</a> <span>on</span> <a href="#">Do You Know the ABC of Health Care?</a> <small> <abbr title="30-04-2015">12 months ago</abbr> </small> <p>Donec venenatis feugiat congue. Integer ipsum tellus, accumsan ut purus...</p> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div>

/* Post tab custom css */ .populat-post-tab { border: 1px solid #e0e0e0; } .populat-post-tab .nav-tabs { border: none; } .populat-post-tab .nav-tabs > li { width: 33.33333333333333%; text-align: center; } .populat-post-tab .nav-tabs > li a { background: #f0f5f7; margin-right: 0; border: 1px solid #e0e0e0; border-radius: 0; display: block; padding: 10px 0; font-weight: 700; font-size: 15px; color: #3a3c41; transition: all 0.01s; } .populat-post-tab .nav-tabs > li.active a { border-top: 2px solid #018EBB; border-bottom: none; border-left: none; border-right: none; background: #ffffff; } .tab-post-list-wrap { margin: 15px 0; padding: 0 35px; } .tab-post-thumb { margin: 0 15px 0 0; } .tab-post-thumb figure { width: 65px; } .tab-post-thumb figure img{ max-width: 70px; } .tab-post-title h6 { font-size: 14px; font-weight: 700; line-height: 18px; margin-bottom: 5px; } .tab-post-title span { font-size: 12px; color: #999ca5; } .tab-post-list ul{ list-style: none; } .tab-post-list ul li:before { content: ""; width: 2px; height: 8px; padding: 0 4px; margin-right: 5px; background: #018EBB; display: inline-block; } .tab-post-list ul li small { display: block; } .tab-post-list ul li small abbr { font-size: 11px; line-height: 20px; text-decoration: none; border: none; }tab-post-thumb