title: Bootstrap: Collapse tab list to dropdown
body: <p>I created a page with twitter bootstrap that contains 2 columns using the grid system. On the left side, I have a stacked pill list (using class .nav-stacked).  When the page's width is under 768px the right column with the content falls under the stacked pills and the stacked pills fill up the full width, which I like.</p>
  
  <p>What I need is when the page is under 768, the stacked pills collapse and shows the toggle button (button with 3 lines). How can I accomplish this? I feel like i'm missing a class or something, heh</p>
  
  <p>The code in it's most basic form:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-sm-4"&gt;
          &lt;ul class="nav nav-pills nav-stacked"&gt;
              &lt;li role="presentation" class="active"&gt;&lt;a href="/link.html"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a href="/link.html"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a href="/link.html"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-8"&gt;
          MY CONTENT GOES HERE
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks guys</p>