<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="col-md-3"></div> <div class="col-md-6"> <div class="panel panel-default panelD"> <div class="panel-heading"> <ul class="list-inline"> <li>Fred</li> <li class="pull-right" style="padding-right: 0;">1 week</li> </ul> </div> <div class="panel-image"> <img src="http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_52d09387ae003_1.JPG" class="panel-image-preview" /> </div> <div class="panel-body"> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote> <span class="tagz">Tags: <a>#faking</a></span> </div> <div class="panel-footer"> <ul class="list-inline clearfix"> <li class="col-sm-4 col-md-4 col-lg-4 level-line-up"><a href=""><span class="fa fa-thumbs-o-up"></span> Like</a><span>10</span></li> <li class="col-sm-4 col-md-4 col-lg-4 level-line-up"><center><a href=""><span class="fa fa-comments"></span> </a><span>10</span></center></li> <li class="col-sm-4 col-md-4 col-lg-4" style="padding-right: 0;"><span class="pull-right">10</span><a class="pull-right" href=""><span class="fa fa-bomb"></span> Nutty</a></li> </ul> </div> </div> <div class="panel panel-default panelD"> <div class="panel-heading"> <ul class="list-inline"> <li>Jimmy</li> <li class="pull-right" style="padding-right: 0;">1 week</li> </ul> </div> <div class="panel-image"> <!--<img src="http://mars-2035432769.us-west-1.elb.amazonaws.com/arcgis/rest/services/Mars_Viking_MDIM21_ClrMosaic_global_232m_sp/MapServer/tile/1/0/2?blankTile=false" class="panel-image-preview" />--> </div> <div class="panel-body"> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote> <span class="tagz">Tags: <a>#jimmy</a> <a>#tag_city</a></span> </div> <div class="panel-footer"> <ul class="list-inline clearfix"> <li class="col-sm-4 col-md-4 col-lg-4 level-line-up"><a href=""><span class="fa fa-thumbs-o-up"></span> Like</a><span>10</span></li> <li class="col-sm-4 col-md-4 col-lg-4 level-line-up"><center><a href=""><span class="fa fa-comments"></span> </a><span>10</span></center></li> <li class="col-sm-4 col-md-4 col-lg-4" style="padding-right: 0;"><span class="pull-right">10</span><a class="pull-right" href=""><span class="fa fa-bomb"></span> Nutty</a></li> <!--<li style="margin-right: -20px;"><a href=""><span class="fa fa-thumbs-o-up"></span> Like</a></li> <li style="margin-right: -20px;"><a href=""><span class="fa fa-comments"></span> Comment</a></li> <li><a href=""><span class="fa fa-bomb"></span> Nutty</a></li> <li class="pull-right" style="margin-right: -5px;"><span>Nuts 10</span></li> <li class="pull-right"><span>Likes 100</span></li>--> </ul> </div> </div> </div> <div class="col-md-3"></div> </div>

@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"); body { background-color: #FAFAFA !important; } .panelD { margin: 20px 0px 20px 0px; } .panelD .panel-heading, .panelD .panel-footer { background-color: #fff !important; } .panel-image img.panel-image-preview { width: 100%; border-radius: 4px 4px 0px 0px; } .panel-heading ~ .panel-image img.panel-image-preview { border-radius: 0px; } .panel-heading .list-inline { margin: 0px 0px 0px -5px !important; } .panel-body { display: block; } .panel-body blockquote { margin: 10px 0 10px; } .tagz { margin: 15px 0px 0px; display: block; } .tagz a { cursor: pointer; color: rgb(100, 100, 100); } .panel-image ~ .panel-footer a { padding: 0px 10px; color: rgb(100, 100, 100); } .panel-image ~ .panel-footer span { color: rgb(100, 100, 100); } .panel-footer .list-inline { margin: 0 0 0 -15px !important; } .panel-image.hide-panel-body ~ .panel-body { height: 0px; padding: 0px; } /*========== Mobile First Method ==========*/ /* Custom, iPhone Retina */ @media only screen and (max-width : 320px) { .level-line-up { position: relative; top: -4px; } } /* Extra Small Devices, Phones */ @media only screen and (max-width : 480px) { .level-line-up { position: relative; top: -4px; } } /* Small Devices, Tablets */ @media only screen and (min-width : 480px) and (max-width : 768px) { .level-line-up { position: relative; top: -4px; } }

/*$(function() { $('.panel-image').on('click', function(e) { $(this).next('.panel-body').slideToggle(); }); });*/