"Panel With List Group"
Bootstrap 3.0.3 Snippet by BhaumikPatel

Post to Facebook Tweet this

<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; }

Related: See More

Light Bootstrap Dashboard PRO React
animated sinin and signup panel. animated login and registeration page, popup,
Register form, html bootstrap4 registration form card panel
Filter elements, sidebar filter panel bootstrap 4

Questions / Comments:

david zamora it doesn't stop it from working ..

Oga Ose () - 9 years ago - Reply 0

Hi! dude you forgot to add <li></li> to every ul.list-group

disqus_FIPSus5rM0 () - 10 years ago - Reply 0

it doesn't stop it from working since they are all links.

Oga Ose () - 9 years ago - Reply 0

http://www.w3.org/TR/html-m... the last link is from html4 but this is html5, it's the same since the beggining of times

disqus_FIPSus5rM0 () - 9 years ago - Reply 0

http://www.w3.org/TR/html4/... (All lists must contain one or more list elements.) It works, but it isn't right. Even though, there could be people adding styles to their lists <li>, and this would result in a malformation of their DOM

disqus_FIPSus5rM0 () - 9 years ago - Reply 0