estamos desenvolvendo um aplicativo e estamos usando o twiiter bootstrap 3, criamos uma barra de navegação com nav-pills

   <ul class="nav nav-pills head-menu">                                                                                                
    <input type="hidden" id="selected_menu_item" value="=$selectedMenuId; ?>" />                               
        <li>
          <a href="#" id="welcome">
          Welcome text ...              
           </a>
        </li>
            <li><a href="#" id="kitchen">Kitchen</a></li>
            <li><a href="#" id="programma" > Programma</a></li>
            <li><a href="#" id="foodart" >foodart text</a></li>
   </ul>                        

alguém com experiência em bootstrap pode nos ajudar, se pudermos tornar essas pílulas de nav recolhíveis e responsivas quando o tamanho for reduzido, assim como podemos fazer facilmente com as barras de nav?

desde já, obrigado