<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 id="col-md-3"> <div class="list-group panel"> <a class="list-group-item list-group-item strong text-center" style="background: #009ce0; color: white;" data-toggle="collapse"> Personalize Your Search</a> <a href="#demo1" class="list-group-item list-group-item-success strong" style="background: #f7f7f7;" data-toggle="collapse" data-parent="#MainMenu"><i class="fa fa-photo"></i> Resource Type <i class="fa fa-caret-down"></i></a> <div class="collapse list-group-submenu" id="demo1"> <a href="#" class="list-group-item"><input type="checkbox">  Audio Content</a> <a href="#" class="list-group-item"><input type="checkbox">  Interactive Media</a> <a href="#" class="list-group-item"><input type="checkbox">  Learning Game</a> <a href="#" class="list-group-item"><input type="checkbox">  Video</a> </div> <a href="#demo2" class="list-group-item list-group-item strong" style="background: #f7f7f7;" data-toggle="collapse" data-parent="#MainMenu"><i class="fa fa-book"></i> Readability <i class="fa fa-caret-down"></i></a> <div class="collapse list-group-submenu" id="demo2"> <a href="#" class="list-group-item"><input type="checkbox">  1</a> <a href="#" class="list-group-item"><input type="checkbox">  2</a> <a href="#" class="list-group-item"><input type="checkbox">  3</a> <a href="#" class="list-group-item"><input type="checkbox">  4</a> <a href="#" class="list-group-item"><input type="checkbox">  5</a> </div> <a href="#demo4" class="list-group-item list-group-item strong" style="background: #f7f7f7;" data-toggle="collapse" data-parent="#MainMenu"><i class="fa fa-language"></i> Languages <i class="fa fa-caret-down"></i></a> <div class="collapse list-group-submenu" id="demo4"> <a href="#" class="list-group-item"><input type="checkbox">  English</a> <a href="#" class="list-group-item"><input type="checkbox">  Chinese</a> <a href="#" class="list-group-item"><input type="checkbox">  French</a> <a href="#SubSubMenu1" class="list-group-item strong" data-toggle="collapse" data-parent="#SubSubMenu1"> 3 more <i class="fa fa-caret-down"></i></a> <div class="collapse list-group-submenu list-group-submenu-1" id="SubSubMenu1"> <a href="#" class="list-group-item"><input type="checkbox">  Russian</a> <a href="#" class="list-group-item"><input type="checkbox">  Urdu</a> <a href="#" class="list-group-item"><input type="checkbox">  Vietnamese</a> </div> </div> <a href="#demo5" class="list-group-item list-group-item strong" style="background: #f7f7f7;" data-toggle="collapse" data-parent="#MainMenu"><i class="fa fa-cubes"></i> Content Collections <i class="fa fa-caret-down"></i></a> <div class="collapse list-group-submenu" id="demo5"> <a href="#" class="list-group-item"><input type="checkbox">  ARKive</a> <a href="#" class="list-group-item"><input type="checkbox">  BrainPOP Junior</a> <a href="#" class="list-group-item"><input type="checkbox">  CK-12</a> <a href="#" class="list-group-item"><input type="checkbox">  Khan Academy</a> <a href="#" class="list-group-item"><input type="checkbox">  Library of Congress</a> <a href="#" class="list-group-item"><input type="checkbox">  NCTM Illuminations</a> <a href="#" class="list-group-item"><input type="checkbox">  PBS</a> <a href="#" class="list-group-item"><input type="checkbox">  Teach Engineering</a> </div> <a class="list-group-item list-group-item strong text-center" style="background: #009ce0; color: white;" data-toggle="collapse"><button type="button" class="btn btn-success btn-sm">SEARCH</button> </a> </div> </div>

.list-group.panel > .list-group-item { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 250px; background: white; color: #666; } .list-group-submenu { width: 250px; } .strong { font-weight: bold; }