html - Bootstrap 3 - How to keep the Nav Collapse Component Open onLoad -

i using bootstrap3 , using collapsible element in design.

<!-- search filter --> <div id="search-filter">   <div class="container">     <div class="row">       <div class="col-md-5 col-xs-12">          <!-- collapse search -->         <button type="button" class="navbar-toggle navbar-toggle-search-filter" data-toggle="collapse" data-target="#searchbar-collapse-set"> <span class="sr-only">toggle navigation</span> <span class="glyphicon glyphicon-chevron-down"></span> </button>         <!-- /collapse search -->          <h3>showing 345 results <small>(hill stations around bangalore)</small></h3>        </div>        <!-- collect nav links, forms, , other content toggling -->       <div class="collapse navbar-collapse" id="searchbar-collapse-set">          <div class="col-md-4 col-xs-12">           <div class="distance">             <h5>distance:</h5>             <div id="distance-slider"></div>             <span class="distance-value">250 kms</span>           </div>         </div>          <div class="col-md-3 col-xs-12">           <div class="sort">             <h5>sort:</h5>             <ul class="nav nav-pills">               <li class="active"><a href="#">popular</a></li>               <li><a href="#">name</a></li>               <li><a href="#">distance</a></li>             </ul>           </div>         </div>        </div>       <!-- /.navbar-collapse -->        <div class="clearfix"></div>      </div>   </div> </div> <!-- /search filter -->  

how can use media-query or js keep opened on smaller devices default?

add "in" class searchbar-collapse-set div so:

<div class="navbar-collapse collapse in" id="searchbar-collapse-set"> 

edit:

the toggle controlled media query. it's display set none @ 768px in rule:

@media (min-width: 768px) {   .navbar-toggle {     display: none;   } } 

so can either override rule in own styles or customize bootstrap css file.