"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

Material Kit 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