Design
<div class="nav nav-tabs" role="tablist" aria-label="Sample Tabs">
<div class="nav-item">
<a id="normal-tab" tabindex="0" role="tab" data-toggle="tab" aria-controls="normal" aria-selected="false">
<span class="vismaicon vismaicon-dynamic vismaicon-sm vismaicon-filled vismaicon-warning"></span>
Warning
</a>
</div>
<div class="nav-item disabled">
<a id="disabled-tab" tabindex="-1" role="tab" data-toggle="tab" aria-controls="disabled" aria-selected="false">Disabled</a>
</div>
<div class="nav-item active">
<a> id="selected-tab" tabindex="0" role="tab" data-toggle="tab" aria-controls="myTabContent" aria-selected="true">Selected</a>
</div>
...
// Overflow tabs dropdown (three dots)
<div class="dropdown tabdrop">
<a class="dropdown-toggle" tabindex="0" data-toggle="dropdown">
<span class="sr-only">Toggle dropdown</span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a id="normal-tab2" tabindex="0" role="tab" data-toggle="tab" aria-controls="normal2" aria-selected="false">Normal</a>
</li>
...
</ul>
</div>
</div>
// Tab content
<div id="myTabContent" class="tab-content p-32" role="tabpanel" aria-labelledby="selected-tab" aria-hidden="false">
...
</div>
Primary variant
Add to your tabs main container .nav-tabs the .nav-tabs-primary class.
<ul class="nav nav-tabs nav-tabs-primary" role="tablist" aria-label="Sample Tabs">
<li class="nav-item" >
<a id="normal-tab" tabindex="0" role="tab" data-toggle="tab" aria-controls="normal" aria-selected="false">Normal</a>
</li>
...
</ul>
<div id="myTabContent" class="tab-content p-32" role="tabpanel" aria-labelledby="selected-tab" aria-hidden="false">
...
</div>
Justified tabs
Easily add to your tabs main container .nav-tabs the .nav-justified class.
<ul class="nav nav-tabs nav-justified" role="tablist" aria-label="Sample Justified Tabs">
<li class="nav-item">
<a id="normal-tab" tabindex="0" role="tab" data-toggle="tab" aria-controls="normal" aria-selected="false">Normal</a>
</li>
...
</ul>