<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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="row"> <div class="col-md-6"> <div class="panel panel-primary"> <div class="panel-heading"> <div class='row'> <div class='col-md-6 text-left'>Message</div> <div class='col-md-4 text-left'>Date</div> <div class='col-md-2 text-left'>FileName</div> </div> </div> <ul class="list-group"> <a href="#" class="list-group-item"> <div class='row'> <div class='col-md-6 text-left'>This is My Sexy Message</div> <div class='col-md-4 text-left'>MM/DD/YYYY</div> <div class='col-md-2 text-left'>myfile.pdf</div> </div> </a> <a href="#" class="list-group-item"> <div class='row'> <div class='col-md-6 text-left'>This is My Sexy Message</div> <div class='col-md-4 text-left'>MM/DD/YYYY</div> <div class='col-md-2 text-left'>myfile.pdf</div> </div> </a> <a href="#" class="list-group-item"> <div class='row'> <div class='col-md-6 text-left'>This is My Sexy Message</div> <div class='col-md-4 text-left'>MM/DD/YYYY</div> <div class='col-md-2 text-left'>myfile.pdf</div> </div> </a> <a href="#" class="list-group-item"> <div class='row'> <div class='col-md-6 text-left'>This is My Sexy Message</div> <div class='col-md-4 text-left'>MM/DD/YYYY</div> <div class='col-md-2 text-left'>myfile.pdf</div> </div> </a> <a href="#" class="list-group-item"> <div class='row'> <div class='col-md-6 text-left'>This is My Sexy Message</div> <div class='col-md-4 text-left'>MM/DD/YYYY</div> <div class='col-md-2 text-left'>myfile.pdf</div> </div> </a> <a href="#" class="list-group-item"> <div class='row'> <div class='col-md-6 text-left'>This is My Sexy Message</div> <div class='col-md-4 text-left'>MM/DD/YYYY</div> <div class='col-md-2 text-left'>myfile.pdf</div> </div> </a> </ul> </div> </div> <div class="col-md-6"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"> Sale Order SO001</h3> </div> <ul class="list-group"> <a href="#" class="list-group-item">Cras justo odio</a> </ul> </div> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"> Sale Order SO002</h3> </div> <ul class="list-group"> <a href="#" class="list-group-item">Cras justo odio</a> </ul> </div> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"> Sale Order SO003</h3> </div> <ul class="list-group"> <a href="#" class="list-group-item">Cras justo odio</a> </ul> </div> </div> </div> </div>

body { padding-top: 20px; background-color: #F7F7F7; } .panel > .list-group { margin-bottom: 0; } .panel > .list-group .list-group-item { border-width: 1px 0; } .panel > .list-group .list-group-item:first-child { border-top-right-radius: 0; border-top-left-radius: 0; } .panel > .list-group .list-group-item:last-child { border-bottom: 0; } .panel-heading + .list-group .list-group-item:first-child { border-top-width: 0; } .panel-default .list-group-item.active { color: #000; background-color: #DDD; border-color: #DDD; } .panel-primary .panel-heading, .panel-primary .list-group-item.active { color: #FFF; background-color: #01abce; border-color: #01abce; } .panel-success .list-group-item.active { color: #3C763D; background-color: #DFF0D8; border-color: #D6E9C6; } .panel-info .list-group-item.active { color: #31708F; background-color: #D9EDF7; border-color: #BCE8F1; } .panel-warning .list-group-item.active { color: #8A6D3B; background-color: #FCF8E3; border-color: #FAEBCC; } .panel-danger .list-group-item.active { color: #A94442; background-color: #F2DEDE; border-color: #EBCCD1; } .panel a.list-group-item.active:hover, a.list-group-item.active:focus { color: #000; background-color: #DDD; border-color: #DDD; }