<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="page-header"> <h1>Panels with header on the side.</h1> </div> <div class="row"> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-leftheading"> <h3 class="panel-lefttitle">Panel title</h3> </div> <div class="panel-rightbody"> <table class="table table-condensed table-justified"> <tbody> <tr> <td>January<br/>2015<br/> <a class="btn btn-md btn-danger" href="/docs/fta/2015/19-january-FTA.pdf" target="_blank">PDF</a> </td> </tr> </tbody> <tbody> <tr> <td>November 2014 <br/> <a class="btn btn-md btn-danger" href="//nstp.org/docs/fta/2014/November_FTA.pdf" target="_blank" >PDF</a> </td> <td>October 2014<br/> <a class="btn btn-md btn-danger" href="//nstp.org/docs/fta/2014/October_FTA.pdf" target="_blank" >PDF</a> </td> <td>August-September 2014<br/> <a class="btn btn-md btn-danger" href="//nstp.org/docs/fta/2014/Aug_Sept_FTA.pdf" target="_blank">PDF</a> </td> <td>July 2014<br/> <a class="btn btn-md btn-danger" href="//nstp.org/docs/fta/2014/July FTA 2014.pdf" target="_blank">PDF</a> </td> <td>June 2014 <br/> <a class="btn btn-md btn-danger" href="//nstp.org/docs/fta/2014/April_May_FTA.pdf" target="_blank">PDF</a> </td> <td>March-April 2014 <br/> <a class="btn btn-md btn-danger" href="//nstp.org/docs/fta/2014/March_April_FTA.pdf" target="_blank">PDF</a> </td> <td>Febuary 2014<br/> <a class="btn btn-md btn-danger" href="//nstp.org/docs/fta/2014/18-February_FTA.pdf" target="_blank">PDF</a> </td> <td>January 2014<br/> <a class="btn btn-md btn-danger" href="//nstp.org/docs/fta/2014/24-January_FTA.pdf" target="_blank">PDF</a> </td> </tr> </tbody> </table> </div> <div class="clearfix"> </div> </div> </div> </div>

.panel { position: relative; } .panel-default > .panel-leftheading { color: #333; background-color: #f5f5f5; border-color: #ddd; } .panel-primary > .panel-leftheading { color: #fff; background-color: #428bca; border-color: #428bca; } .panel-success > .panel-leftheading { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .panel-info > .panel-leftheading { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; } .panel-warning > .panel-leftheading { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; } .panel-danger > .panel-leftheading { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .panel-leftheading { width: 42px; padding: 10px 15px; border-right: 1px solid transparent; border-bottom: 1px solid transparent; border-top-right-radius: 3px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; float: left; height: 100%; position: absolute; } .panel-lefttitle { margin-top: 0; margin-bottom: 0; margin-left: 15px; font-size: 16px; color: inherit; -webkit-transform: rotate(90deg); -webkit-transform-origin: left top; -moz-transform: rotate(90deg); -moz-transform-origin: left top; -ms-transform: rotate(90deg); -ms-transform-origin: left top; -o-transform: rotate(90deg); -o-transform-origin: left top; transform: rotate(90deg); transform-origin: left top; position: absolute; white-space: nowrap; } .panel-rightbody { float: left; margin-left: 45px; padding: 15px; }