<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" style="margin-top:10px;"> <div class="row form-group"> <div class="col-xs-3"> <div class="panel panel-default"> <div class="panel-image hide-panel-body"> <img src="http://www.nstp.org//images/Instructors/Nina_Tross_130x130_images_instructor.jpg" class="panel-image-preview" /> </div> <div class="panel-footer"> <div class="agenda"> <div class="table-responsive"> <table class="table table-condensed table-bordered"> <tbody> <!-- Single event in a single day --> <tr> <td class="agenda-date" class="active" rowspan="1"> <div class="dayofmonth">26</div> <div class="dayofweek">Saturday</div> <div class="shortdate text-muted">July, 2014</div> </td> <td class="agenda-time"> 5:30 AM </td> <td class="agenda-events"> <div class="agenda-event"> <i class="glyphicon glyphicon-repeat text-muted" title="Repeating event"></i> Fishing </div> </td> </tr> <!-- Multiple events in a single day (note the rowspan) --> </tbody> </table> </div> </div> </div> </div> </div>

@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"); .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-image ~ .panel-body, .panel-image.hide-panel-body ~ .panel-body { overflow: hidden; } .panel-image ~ .panel-footer a { padding: 0px 2px; font-size: .9em; color: rgb(100, 100, 100); } .agenda { } /* Dates */ .agenda .agenda-date { width: 170px; } .agenda .agenda-date .dayofmonth { width: 40px; font-size: 36px; line-height: 36px; float: left; text-align: right; margin-right: 10px; } .agenda .agenda-date .shortdate { font-size: 0.75em; } /* Times */ .agenda .agenda-time { width: 140px; } /* Events */ .agenda .agenda-events { } .agenda .agenda-events .agenda-event { } @media (max-width: 767px) { }