title: bootstrap - tabbable with tabs on left not working at all
body: <p>I am attempting to create tabbable tabs where the tabs are stacked vertically on the left side of the page, and the content on the right side of the page changes with the tabs. Here is my code: </p>
  
  <pre><code>&lt;div class="tabbable tabs-left"&gt;
    &lt;ul class="nav nav-tabs" data-tabs="tabs"&gt;
      &lt;li class="active"&gt;
        &lt;a href="#foodTab" data-toggle="tab"&gt;
      Food&lt;/a&gt;&lt;/li&gt;
      &lt;li class=""&gt;
        &lt;a href="#toyTab" data-toggle="tab"&gt;
      Toy&lt;/a&gt;&lt;/li&gt;
      &lt;li class=""&gt;
        &lt;a href="#clothesTab" data-toggle="tab"&gt;
      Clothes&lt;/a&gt;&lt;/li&gt;
      &lt;li class=""&gt;
        &lt;a href="#booksTab" data-toggle="tab"&gt;
      Book&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class="tab-content"&gt;
      &lt;div class="tab-pane fade active" id="foodTab"&gt;
        Oh my god it's the food tab! 
      &lt;/div&gt;
      &lt;div class="tab-pane fade" id="toyTab"&gt;
        Toy tab! 
      &lt;/div&gt;
      &lt;div class="tab-pane fade" id="clothesTab"&gt;
        clothing tab
      &lt;/div&gt;
      &lt;div class="tab-pane fade" id="booksTab"&gt;
        books books books
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What happens is that the tabs show up, but all the content is invisible, and clicking on the tabs changes the active tab but does not change anything on the right side. 
  I attempted to create a jsfiddle but it's even worse there, maybe someone can teach me how to do this correctly: <a href="http://jsfiddle.net/ewRZZ/3/" rel="nofollow">http://jsfiddle.net/ewRZZ/3/</a> </p>
  
  <p>Finally, I am including the following files in the following order inside the html head: 
  - bootstrap.min.css
  - bootstrap-responsive.min.css
  - jquery-1.8.3.min.js
  - bootstrap.min.js </p>
  
  <p>I also have specified the correct DOCTYPE at the top of the page so I know that is not the issue. </p>
  
  <p>I tried copy-pasting the jquery code from the bootstrap website and then changing "#myTab a" to "#foodTab a" etc, but it changed nothing. Maybe I was doing it wrong? </p>
  
  <p>I actually got tabs to work on other pages on the same site (with the same code that includes the script). The only difference is that those tabs were on the top, not along the side, and thus I did not enclose them in a <code>&lt;div class="tabbable"&gt;&lt;/div&gt;</code>. Maybe this has something to do with it? Thanks :) </p>