title: Bootstrap javascript tab card
body: <p>I'm trying to use bootstrap's card/tab feature to create a tabulated card that has 3 tabs, each corresponding to it's own active 'card body'</p>
  
  <p>My current code:</p>
  
  <pre><code>&lt;div class="col-lg-8 col-md-12 col-sm-12"&gt;
        &lt;div class="page-header"&gt;
          &lt;h2&gt;Social Media&lt;/h2&gt;      
        &lt;/div&gt;
        &lt;div class="card text-center"&gt;
          &lt;div class="card-header"&gt;
            &lt;ul class="nav nav-tabs card-header-tabs"&gt;
              &lt;li class="nav-item"&gt;
                &lt;a class="nav-link active" href="#insta"&gt;Instagram&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#face"&gt;Facebook&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#twit"&gt;Twitter&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="card-body"&gt;
            &lt;div id="insta"&gt;Instagram&lt;/div&gt;
            &lt;div id="face"&gt;Facebook&lt;/div&gt;
            &lt;div id="twit"&gt;Twitter&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- END WIDGET 2 --&gt;
      &lt;/div&gt;
  
  $(document).ready(function(){
  $(".nav-tabs a").click(function(){
      $(this).tab('show');
  });
  });
  </code></pre>
  
  <p>Creates the card correctly, and it indeed shows the appropriate tab headers with their respective links.</p>
  
  <p>What I'm trying to do is make it so that if the Instagram tab is active, it shows the text 'Instagram'. Same for the other 2. Currently they are just inactive tabs and the main tab's body shows all three lines of text.</p>
  
  <p>The javascript looks right but it's just not tabulating properly</p>
  
  <p>Here's the codepen:</p>
  
  <p><a href="https://codepen.io/anon/pen/gKLJrm" rel="nofollow noreferrer">https://codepen.io/anon/pen/gKLJrm</a></p>