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>
Last Updated 1 year ago
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages