<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 class="container">
<div class="row">
<!--<div id="filter-panel" class="collapse filter-panel">-->
<div class="panel panel-default">
<div class="panel-body">
<form class="form-inline" role="form">
<div class="form-group">
<label class="filter-col" style="margin-right:0;" for="pref-perpage">Rows per page:</label>
<select id="pref-perpage" class="form-control">
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option selected="selected" value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
<option value="500">500</option>
<option value="1000">1000</option>
</select>
</div> <!-- form group [rows] -->
<div class="form-group">
<label class="filter-col" style="margin-right:0;" for="pref-search">Search:</label>
<input type="text" class="form-control input-sm" id="pref-search" placeholder="How to...">
</div><!-- form group [search] -->
<div class="form-group">
<label class="filter-col" style="margin-right:0;" for="pref-orderby">Order by:</label>
<select id="pref-orderby" class="form-control">
<option>Relevance</option>
<option>Popularity</option>
<option>Difficiulty</option>
<option>Complexity</option>
<option>Cost</option>
</select>
</div> <!-- form group [order by] -->
<div class="form-group">
<div class="checkbox" style="margin-left:10px; margin-right:10px;">
<label><input type="checkbox"> Remember parameters</label>
</div>
<button type="submit" class="btn btn-default filter-col">
<span class="glyphicon glyphicon-record"></span>Search
</button>
</div>
</form>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#filter-panel">
<span class="glyphicon glyphicon-cog"></span> Advanced
</button>
<!--</div>-->
</div>
.container{
margin-top:30px;
}
.filter-col{
padding-left:10px;
padding-right:10px;
}
.nav>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a, .dropdown-menu>li{
border-bottom: 3px solid transparent;
}
.nav>li>a:focus, .nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
border-bottom: 3px solid transparent;
background: none;
}
.navbar a, .dropdown-menu>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .navbar-toggle{
color: #000;
}
.dropdown-menu{
-webkit-box-shadow: none;
box-shadow:none;
}
.nav li:hover:nth-child(8n+1), .nav li.active:nth-child(8n+1){
border-bottom: #C4E17F 3px solid;
}
.nav li:hover:nth-child(8n+2), .nav li.active:nth-child(8n+2){
border-bottom: #F7FDCA 3px solid;
}
.nav li:hover:nth-child(8n+3), .nav li.active:nth-child(8n+3){
border-bottom: #FECF71 3px solid;
}
.nav li:hover:nth-child(8n+4), .nav li.active:nth-child(8n+4){
border-bottom: #F0776C 3px solid;
}
.nav li:hover:nth-child(8n+5), .nav li.active:nth-child(8n+5){
border-bottom: #DB9DBE 3px solid;
}
.nav li:hover:nth-child(8n+6), .nav li.active:nth-child(8n+6){
border-bottom: #C49CDE 3px solid;
}
.nav li:hover:nth-child(8n+7), .nav li.active:nth-child(8n+7){
border-bottom: #669AE1 3px solid;
}
.nav li:hover:nth-child(8n+8), .nav li.active:nth-child(8n+8){
border-bottom: #62C2E4 3px solid;
}
.navbar-toggle .icon-bar{
color: #fff;
background: #fff;
}
