I'm trying to use bootstrap's card/tabs feature to create a tabular card that has 3 tabs, each corresponding to its own active 'card body'.
Creates the cards correctly, and does indeed display the appropriate tab headers with their respective links.
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. Right now they are just inactive tabs and the main tab body shows all three lines of text.
Javascript looks correct but is not tabulated correctly
Solutip
You need to use appropriate markup for tabs tab-content and tab-pane to make tabs work: https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior ( no jquery required ).
https://www.codeply.com/go/p5Zm4JA5jb
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#insta">Instagram</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#face">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#twit">Twitter</a>
</li>
</ul>
</div>
<div class="tab-content card-body">
<div id="insta" class="tab-pane active">Instagram</div>
<div id="face" class="tab-pane">Facebook</div>
<div id="twit" class="tab-pane">Twitter</div>
</div>
</div>Pay attention to both and nav-link arrange the items .tab-pane active