title: How to use Bootstrap tabs?
body: <p>I am trying to understand how to do this: <a href="http://getbootstrap.com/javascript/#tabs" rel="noreferrer">http://getbootstrap.com/javascript/#tabs</a></p>
  
  <p>I think the documentation is not detailed enough, because I can not understand how it works.</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;ul class="nav nav-tabs"&gt;
          &lt;li class="nav active"&gt;&lt;a href="#A" data-toggle="tab"&gt;A&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav"&gt;&lt;a href="#B" data-toggle="tab"&gt;B&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav"&gt;&lt;a href="#C" data-toggle="tab"&gt;C&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;!-- Tab panes --&gt;
      &lt;div class="tab-content"&gt;
          &lt;div class="tab-pane fade in active" id="A"&gt;Content inside tab A&lt;/div&gt;
          &lt;div class="tab-pane fade" id="B"&gt;Content inside tab B&lt;/div&gt;
          &lt;div class="tab-pane fade" id="C"&gt;Content inside tab C&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This code gives me what I want
  <img src="https://i.stack.imgur.com/i34rV.jpg" alt="enter image description here"></p>
  
  <p>However I can't switch between tabs.</p>
  
  <p>So the question is: what JQuery or Javascript code should I add to make it work? What is shown in the example does not work :(</p>