Tabs

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface. Use them to create tab able regions with our tab JavaScript plugin.

<ul class="nav nav-tabs mb-4" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#tab-1" role="tab" aria-controls="active" aria-expanded="true">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tab-2" role="tab" aria-controls="inactive">Inactive</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
        Dropdown
        </a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#tab-3" role="tab" data-toggle="tab" aria-controls="dropdown1">Dropdown tab</a>
            <a class="dropdown-item" href="#tab-4" role="tab" data-toggle="tab" aria-controls="dropdown2">Another tab</a>
        </div>
    </li>
</ul>
<div class="tab-content">
    <div role="tabpanel" class="tab-pane fade show active" id="tab-1">
        <p> Basic tabs example using <code>.nav-tabs</code> class. Also requires base <code>.nav</code> class. </p>
    </div>
    <div class="tab-pane fade" id="tab-2" role="tabpanel">
        <p>This style Should Apply same for all the possible variations of this sections.</p>
    </div>
    <div class="tab-pane fade" id="tab-3" role="tabpanel">
        <p> Basic tabs example using <code>.nav-tabs</code> class. Also requires base <code>.nav</code> class.</p>
    </div>
    <div class="tab-pane fade" id="tab-4" role="tabpanel">
        <p>This style Should Apply same for all the possible variations of this sections.</p>
    </div>
</div>