card header tabs bootstrap 4 code example

Example: bootstrap card with working nav tabs

<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>