Bootstrap v4 Card Navigation with Tabs

cards.html

<!-- bootstrap version 4.0.0-alpha.6 -->
<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" href="#c1" data-toggle="tab">Card 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#c2" data-toggle="tab">Card 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#c3" data-toggle="tab">Card 3</a>
            </li>
        </ul>
    </div>
    <div class="card-block tab-content clearfix">
        <div class="tab-pane active" role="tabpanel" id="c1">
            card 1
        </div>
        <div class="tab-pane fade" role="tabpanel" id="c2">
            card 2
        </div>
        <div class="tab-pane fade" role="tabpanel" id="c3">
            card 3
        </div>
    </div>
</div>