<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" style="margin-top:40px"><div class="row"><div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3"> <!-- The idea is to use mostly Bootstrap markup, peppered with a few "tr" and "td" classes, so you can turn any basic bootstrap panel into a columnar panel. --> <div class="panel panel-default panel-table"> <div class="panel-heading"> <div class="tr"> <div class="td">heading</div> <div class="td">heading</div> <div class="td">heading</div> </div> </div> <div class="panel-body"> <div class="tr"> <div class="td">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique facere necessitatibus quo laboriosam consequuntur</div> <div class="td">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi aliquam placeat odit quasi autem distinctio veritatis ex numquam nihil</div> <div class="td">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi aliquam placeat odit quasi autem distinctio veritatis ex numquam nihil nulla tempora a dolorem omnis beatae facilis perspiciatis doloribus? Error dolore!</div> </div> </div> <div class="panel-footer"> <div class="tr"> <div class="td">footer</div> <div class="td">footer</div> <div class="td">footer</div> </div> </div> </div> </div></div></div>

/* * See it in action here: http://jsfiddle.net/seydoggy/6s92p51a/ */ .panel-table { display:table; } .panel-table > .panel-heading { display: table-header-group; background: transparent; } .panel-table > .panel-body { display: table-row-group; } .panel-table > .panel-body:before, .panel-table > .panel-body:after { content:none; } .panel-table > .panel-footer { display: table-footer-group; background: transparent; } .panel-table > div > .tr { display: table-row; } .panel-table > div:last-child > .tr:last-child > .td { border-bottom: none; } .panel-table .td { display: table-cell; padding: 15px; border: 1px solid #ddd; border-top: none; border-left: none; } .panel-table .td:last-child { border-right: none; } .panel-table > .panel-heading > .tr > .td, .panel-table > .panel-footer > .tr > .td { background-color: #f5f5f5; } .panel-table > .panel-heading > .tr > .td:first-child { border-radius: 4px 0 0 0; } .panel-table > .panel-heading > .tr > .td:last-child { border-radius: 0 4px 0 0; } .panel-table > .panel-footer > .tr > .td:first-child { border-radius: 0 0 0 4px; } .panel-table > .panel-footer > .tr > .td:last-child { border-radius: 0 0 4px 0; }