title: Bootstrap Tab shows but does not highlight until clicked
body: <p>I am using Twitter Bootstrap (v3.0.3) Tabs, and they are working perfectly except... the tab that I have marked as <code>active</code> does not visually highlight unless you click on it.</p>
  
  <p>The interesting thing is I can reproduce this behavior using jsFiddle and the example code from the Twitter Bootstrap website: </p>
  
  <p>Bootstrap Example: <a href="http://getbootstrap.com/javascript/#tabs" rel="nofollow">http://getbootstrap.com/javascript/#tabs</a><br>
  jsFiddle: <a href="http://jsfiddle.net/uXV56/" rel="nofollow">http://jsfiddle.net/uXV56/</a></p>
  
  <p><strong>Example Tab Code:</strong></p>
  
  <pre><code>&lt;!-- Nav tabs --&gt;
  &lt;ul class="nav nav-tabs"&gt;
    &lt;li&gt;&lt;a href="#home" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#profile" data-toggle="tab"&gt;Profile&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#messages" data-toggle="tab"&gt;Messages&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#settings" data-toggle="tab"&gt;Settings&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;!-- Tab panes --&gt;
  &lt;div class="tab-content"&gt;
    &lt;div class="tab-pane active" id="home"&gt;...&lt;/div&gt;
    &lt;div class="tab-pane" id="profile"&gt;...&lt;/div&gt;
    &lt;div class="tab-pane" id="messages"&gt;...&lt;/div&gt;
    &lt;div class="tab-pane" id="settings"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Note in jsFiddle that the <code>active</code> tab is open but not visually highlighted.  If you move the <code>active</code> css class to a different tab, and set some kind of content so you can tell them apart, you'll see that Bootstrap is reading that class and opening the correct  tab by default, it's just not highlighting it...  If you click on any tab, including the currently active one, the visual cue shows up highlighting the tab.</p>