Bootstrap 3: Can a nav-pills nav menu collapse like navbar?

Question

I understand that Bootstrap 3 ships with a navbar that collapse when viewed on smaller screens. However, I do not like the look of the navbar and have decided to style my main navigation menu using the nav-pills class. Is it possible to collapse my nav-pills menu when viewing it on a phone device? Here's my nav code:

<nav>
    <ul class="nav nav-pills">
        <li><a href="#"><strong>HOME</strong></a></li>
        <li class="active"><a href="#"><strong>CAPABILITIES</strong></a></li>
        <li><a href="#"><strong>Careers</strong></a></li>
        <li><a href="#"><strong>Contracts</strong></a></li>
        <li><a href="#"><strong>About Us</strong></a></li>
        <li><a href="#"><strong>News</strong></a></li>
        <li><a href="#"><strong>Contact us</strong></a></li>
    </ul>
</nav>

Answer 1

<nav>
    <ul class="nav nav-pills visible-sm visible-xs">
        <li><a href="#"><strong>HOME</strong></a></li>
        <li class="active"><a href="#"><strong>CAPABILITIES</strong></a></li>
        <li><a href="#"><strong>Careers</strong></a></li>
        <li><a href="#"><strong>Contracts</strong></a></li>
        <li><a href="#"><strong>About Us</strong></a></li>
        <li><a href="#"><strong>News</strong></a></li>
        <li><a href="#"><strong>Contact us</strong></a></li>
    </ul>
</nav>

Answer 2

Here is a video on Youtube that shows how it is done: Bootstrap 3.1 Tutorial 1 - Responsive Grid Layouts By Default!

Basically what Dave does in this video, he makes 2 navigation bars, one with navbar other with nav-pills. Nabvar only visible in xs size, and nav-pills are hidden in xs.