<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-4"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"> Panel Default</h3> </div> <ul class="list-group"> <a href="#" class="list-group-item">Cras justo odio</a> <a href="http://www.jquery2dotnet.com/2014/01/two-way-scrolling-in-single-div.html" class="list-group-item active">Dapibus ac facilisis in</a> <a href="#" class="list-group-item">Morbi leo risus</a> <a href="#" class="list-group-item">Porta ac consectetur ac</a> <a href="#" class="list-group-item">Vestibulum at eros</a> </ul> </div> </div> <div class="col-md-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"> Panel Primary</h3> </div> <ul class="list-group"> <a href="#" class="list-group-item">Cras justo odio</a> <a href="http://www.jquery2dotnet.com/2014/01/jquery-export-table-data-into-ms-excel.html" class="list-group-item active">Dapibus ac facilisis in</a> <a href="#" class="list-group-item">Morbi leo risus</a> <a href="#" class="list-group-item">Porta ac consectetur ac</a> <a href="#" class="list-group-item">Vestibulum at eros</a> </ul> </div> </div> <div class="col-md-4"> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title"> Panel Success</h3> </div> <ul class="list-group"> <a href="#" class="list-group-item">Cras justo odio</a> <a href="http://www.jquery2dotnet.com/2013/12/input-cursor-design-using-css3.html" class="list-group-item active">Dapibus ac facilisis in</a> <a href="#" class="list-group-item">Morbi leo risus</a> <a href="#" class="list-group-item">Porta ac consectetur ac</a> <a href="#" class="list-group-item">Vestibulum at eros</a> </ul> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title"> Panel Info</h3> </div> <ul class="list-group"> <a href="#" class="list-group-item">Cras justo odio</a> <a href="http://www.jquery2dotnet.com/2013/12/cool-simple-css-drop-down-menu.html" class="list-group-item active">Dapibus ac facilisis in</a> <a href="#" class="list-group-item">Morbi leo risus</a> <a href="#" class="list-group-item">Porta ac consectetur ac</a> <a href="#" class="list-group-item">Vestibulum at eros</a> </ul> </div> </div> <div class="col-md-4"> <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title"> Panel Warning</h3> </div> <ul class="list-group"> <a href="#" class="list-group-item">Cras justo odio</a> <a href="http://www.jquery2dotnet.com/2013/11/bootstrap-navigation-custom-design.html" class="list-group-item active">Dapibus ac facilisis in</a> <a href="#" class="list-group-item">Morbi leo risus</a> <a href="#" class="list-group-item">Porta ac consectetur ac</a> <a href="#" class="list-group-item">Vestibulum at eros</a> </ul> </div> </div> <div class="col-md-4"> <div class="panel panel-danger"> <div class="panel-heading"> <h3 class="panel-title"> Panel Danger</h3> </div> <ul class="list-group"> <a href="#" class="list-group-item">Cras justo odio</a> <a href="http://www.jquery2dotnet.com/2013/11/image-preview-on-hover-bootstrap.html" class="list-group-item active">Dapibus ac facilisis in</a> <a href="#" class="list-group-item">Morbi leo risus</a> <a href="#" class="list-group-item">Porta ac consectetur ac</a> <a href="#" class="list-group-item">Vestibulum at eros</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 .list-group-item.active { color: #FFF; background-color: #428BCA; border-color: #428BCA; } .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; }