<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-10"> <div class="row"> <div class="col-md-12"> <!--div class="well well-sm"--> <div class="row"> <div class="panel panel-default panel-horizontal"> <div class="panel-heading text-center" style="width:10em;"> <span><h3>3 weeks</h3></span> <span>8 Febrero 2016</span> <hr /> <div class="email" style="padding-top: 10px;">johndoe@tasktick.com</div> <span><h5>2 weeks</h5><span> </div> <div class="panel-body"> <!--div class="col-xs-2 col-md-3 text-center age"> <img src="https://placeholdit.imgix.net/~text?txtsize=40&txt=John%20Doe&w=200&h=200" class="img-circle img-responsive" alt="" /> </div--> <div class="col-xs-12 col-md-12 section-box"> <div class="email" style="padding-top: 10px;">johndoe@tasktick.com</div> <h2> Subject <a href="http://bootsnipp.com/" target="_blank"><span class="glyphicon glyphicon-new-window"> </span></a> </h2> <p> Lorem ipsum dolor sit amet, eos ea prima ullamcorper. Epicurei efficiendi duo ex, ludus equidem epicuri id his, libris perfecto in usu. Lorem ipsum dolor sit amet, eos ea prima ullamcorper. Epicurei efficiendi duo ex, ludus equidem epicuri id his, libris perfecto in usu. </p> <hr /> <div class="row rating-desc"> <div class="col-md-12"> <span class="glyphicon glyphicon-comment"></span>(100 Comments)<span class="separator">|</span> </div> </div> </div> </div> <div class="panel-footer text-center" style="width:4em;">Actions</div> </div> </div> <!--/div--> </div> </div> </div> </div>

body{ margin-top:20px;} .glyphicon { margin-right:5px;} .section-box h2 { margin-top:0px;} .section-box h2 a { font-size:15px; } .glyphicon-heart { color:#e74c3c;} .glyphicon-comment { color:#27ae60;} .separator { padding-right:5px;padding-left:5px; } .section-box hr {margin-top: 0;margin-bottom: 5px;border: 0;border-top: 1px solid rgb(199, 199, 199);} .panel.panel-horizontal { display:table; width:100%; } .panel.panel-horizontal > .panel-heading, .panel.panel-horizontal > .panel-body, .panel.panel-horizontal > .panel-footer { display:table-cell; } .panel.panel-horizontal > .panel-heading, .panel.panel-horizontal > .panel-footer { width: 25%; border:0; vertical-align: middle; } .panel.panel-horizontal > .panel-heading { border-right: 1px solid #ddd; border-top-right-radius: 0; border-bottom-left-radius: 4px; } .panel.panel-horizontal > .panel-footer { border-left: 1px solid #ddd; border-top-left-radius: 0; border-bottom-right-radius: 4px; } .email { font-size: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }