Tabs

HTML example:

<!-- START: Tabs  -->
<div class="nk-tabs">
    <!--
        Additional Classes:
            .nav-tabs-fill
    -->
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" href="#tabs-1-1" role="tab" data-toggle="tab">Tab 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#tabs-1-2" role="tab" data-toggle="tab">Tab 2</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#tabs-1-3" role="tab" data-toggle="tab">Tab 3</a>
        </li>
    </ul>
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active" id="tabs-1-1">
            <div class="nk-gap"></div>
            <p>I have related the substance of several conversations I had with my master during the greatest part of the time I had the, for brevity sake, omitted much moredown.</p>
            <p>And she went on planning to herself how she would manage it. 'They must go by the carrier' she thought; and how funny it'll seem And she went on planning to herself how</p>
            <div class="nk-gap"></div>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="tabs-1-2">
            <div class="nk-gap"></div>
            <p>And she went on planning to herself how she would manage it. 'They must go by the carrier' she thought; and how funny it'll seem And she went on planning to herself how</p>
            <div class="nk-gap"></div>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="tabs-1-3">
            <div class="nk-gap"></div>
            <p>I have related the substance of several conversations I had with my master during the greatest part of the time I had the, for brevity sake, omitted much moredown.</p>
            <div class="nk-gap"></div>
        </div>
    </div>
</div>
<!-- END: Tabs -->

Available Classes:

  • .nav-tabs-fill – fill tabs full available width;
Was this page helpful?