Basic Tabs
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
<ul class="nav nav-tabs" id="tab-one" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="tab-one-1" data-toggle="tab" href="#tab-one-content-1" role="tab" aria-controls="tab-one-content-1" aria-selected="true">Home</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="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-one-2" data-toggle="tab" href="#tab-one-content-2" role="tab" aria-controls="tab-one-content-2" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="tab-one-3" data-toggle="tab" href="#tab-one-content-3" role="tab" aria-controls="tab-one-content-3" aria-selected="false">Disabled</a>
</li>
</ul>
<div class="tab-content" id="tab-one-content">
<div class="tab-pane fade show active" id="tab-one-content-1" role="tabpanel" aria-labelledby="tab-one-1">
<p>...</p>
</div>
<div class="tab-pane fade" id="tab-one-content-2" role="tabpanel" aria-labelledby="tab-one-2">
<p>...</p>
</div>
<div class="tab-pane fade" id="tab-one-content-3" role="tabpanel" aria-labelledby="tab-one-3">
<p>...</p>
</div>
</div>
Fill & Justify Tabs
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
<ul class="nav nav-pills nav-fill" id="tab-three" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="tab-three-1" data-toggle="tab" href="#tab-three-content-1" role="tab" aria-controls="tab-three-content-1" aria-selected="true">Home</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="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-three-2" data-toggle="tab" href="#tab-three-content-2" role="tab" aria-controls="tab-three-content-2" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="tab-three-3" data-toggle="tab" href="#tab-three-content-3" role="tab" aria-controls="tab-three-content-3" aria-selected="false">Disabled</a>
</li>
</ul>
<div class="tab-content" id="tab-three-content">
<div class="tab-pane fade show active" id="tab-three-content-1" role="tabpanel" aria-labelledby="tab-three-1">
<p>...</p>
</div>
<div class="tab-pane fade" id="tab-three-content-2" role="tabpanel" aria-labelledby="tab-three-2">
<p>...</p>
</div>
<div class="tab-pane fade" id="tab-three-content-3" role="tabpanel" aria-labelledby="tab-three-3">
<p>...</p>
</div>
</div>
Icon Tabs
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
<ul class="nav nav-tabs" id="tab-five" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="tab-five-1" data-toggle="tab" href="#tab-five-content-1" role="tab" aria-controls="tab-five-content-1" aria-selected="true">
<i class="la la-home nav-link_icon"></i>
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-five-2" data-toggle="tab" href="#tab-five-content-2" role="tab" aria-controls="tab-five-content-2" aria-selected="false">
<i class="ion-md-people nav-link_icon"></i>
Profile
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="tab-five-3" data-toggle="tab" href="#tab-five-content-3" role="tab" aria-controls="tab-five-content-3" aria-selected="false">
<i class="ti-notepad nav-link_icon"></i>
Disabled
</a>
</li>
</ul>
<div class="tab-content" id="tab-five-content">
<div class="tab-pane fade show active" id="tab-five-content-1" role="tabpanel" aria-labelledby="tab-five-1">
<p>...</p>
</div>
<div class="tab-pane fade" id="tab-five-content-2" role="tabpanel" aria-labelledby="tab-five-2">
<p>...</p>
</div>
<div class="tab-pane fade" id="tab-five-content-3" role="tabpanel" aria-labelledby="tab-five-3">
<p>...</p>
</div>
</div>
Color Variants for Pills Tabs
Different color variants for pill tabs. You can use these with prefix.nav-pill_* and get like: primary, danger, brand etc...Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
<ul class="nav nav-pills nav-pills_*" id="tab-ten" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="tab-ten-1" data-toggle="tab" href="#tab-ten-content-1" role="tab" aria-controls="tab-ten-content-1" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-ten-2" data-toggle="tab" href="#tab-ten-content-2" role="tab" aria-controls="tab-ten-content-2" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-ten-3" data-toggle="tab" href="#tab-ten-content-3" role="tab" aria-controls="tab-ten-content-3" aria-selected="false">Message</a>
</li>
</ul>
<div class="tab-content" id="tab-ten-content">
<div class="tab-pane fade show active" id="tab-ten-content-1" role="tabpanel" aria-labelledby="tab-ten-1">
<p>...</p>
</div>
<div class="tab-pane fade" id="tab-ten-content-2" role="tabpanel" aria-labelledby="tab-ten-2">
<p>...</p>
</div>
<div class="tab-pane fade" id="tab-ten-content-3" role="tabpanel" aria-labelledby="tab-ten-3">
<p>...</p>
</div>
</div>
Pills Tabs
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
<ul class="nav nav-pills" id="tab-two" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="tab-two-1" data-toggle="tab" href="#tab-two-content-1" role="tab" aria-controls="tab-two-content-1" aria-selected="true">Home</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="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-two-2" data-toggle="tab" href="#tab-two-content-2" role="tab" aria-controls="tab-two-content-2" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="tab-two-3" data-toggle="tab" href="#tab-two-content-3" role="tab" aria-controls="tab-two-content-3" aria-selected="false">Disabled</a>
</li>
</ul>
<div class="tab-content" id="tab-two-content">
<div class="tab-pane fade show active" id="tab-two-content-1" role="tabpanel" aria-labelledby="tab-two-1">
<p>...</p>
</div>
<div class="tab-pane fade" id="tab-two-content-2" role="tabpanel" aria-labelledby="tab-two-2">
<p>...</p>
</div>
<div class="tab-pane fade" id="tab-two-content-3" role="tabpanel" aria-labelledby="tab-two-3">
<p>...</p>
</div>
</div>
Vertical Pills Tabs
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
<ul class="nav nav-pills flex-column" id="tab-four" role="tablist">
<li class="nav-item">
<a class="nav-link" id="tab-four-1" data-toggle="tab" href="#tab-four-content-1" role="tab" aria-controls="tab-four-content-1" aria-selected="false">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-four-2" data-toggle="tab" href="#tab-four-content-2" role="tab" aria-controls="tab-four-content-2" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-four-3" data-toggle="tab" href="#tab-four-content-3" role="tab" aria-controls="tab-four-content-3" aria-selected="false">Message</a>
</li>
</ul>
<div class="tab-content" id="tab-four-content">
<div class="tab-pane fade show active" id="tab-four-content-1" role="tabpanel" aria-labelledby="tab-four-1">
<p>...</p>
</div>
<div class="tab-pane fade" id="tab-four-content-2" role="tabpanel" aria-labelledby="tab-four-2">
<p>...</p>
</div>
<div class="tab-pane fade" id="tab-four-content-3" role="tabpanel" aria-labelledby="tab-four-3">
<p>...</p>
</div>
</div>
Icon Pills Tabs
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
<ul class="nav nav-pills" id="tab-six" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="tab-six-1" data-toggle="tab" href="#tab-six-content-1" role="tab" aria-controls="tab-six-content-1" aria-selected="true">
<i class="la la-home nav-link_icon"></i>
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-six-2" data-toggle="tab" href="#tab-six-content-2" role="tab" aria-controls="tab-six-content-2" aria-selected="false">
<i class="ion-md-people nav-link_icon"></i>
Profile
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="tab-six-3" data-toggle="tab" href="#tab-six-content-3" role="tab" aria-controls="tab-six-content-3" aria-selected="false">
<i class="ti-notepad nav-link_icon"></i>
Disabled
</a>
</li>
</ul>
<div class="tab-content" id="tab-six-content">
<div class="tab-pane fade show active" id="tab-six-content-1" role="tabpanel" aria-labelledby="tab-six-1">
<p>...</p>
</div>
<div class="tab-pane fade" id="tab-six-content-2" role="tabpanel" aria-labelledby="tab-six-2">
<p>...</p>
</div>
<div class="tab-pane fade" id="tab-six-content-3" role="tabpanel" aria-labelledby="tab-six-3">
<p>...</p>
</div>
</div>
Plain Tabs
Plain tabs come with different color variants for plain tabs. You can use these with prefix.nav-plain_* and get like: primary, danger, brand etc...Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
<ul class="nav nav-plain nav-plain_*" id="tab-plain" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="tab-plain-1" data-toggle="tab" href="#tab-plain-content-1" role="tab" aria-controls="tab-plain-content-1" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-plain-2" data-toggle="tab" href="#tab-plain-content-2" role="tab" aria-controls="tab-plain-content-2" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="tab-plain-3" data-toggle="tab" href="#tab-plain-content-3" role="tab" aria-controls="tab-plain-content-3" aria-selected="false">Disabled</a>
</li>
</ul>
<div class="tab-content" id="tab-plain-content">
<div class="tab-pane fade show active" id="tab-plain-content-1" role="tabpanel" aria-labelledby="tab-plain-1">
<p>...</p>
</div>
<div class="tab-pane fade" id="tab-plain-content-2" role="tabpanel" aria-labelledby="tab-plain-2">
<p>...</p>
</div>
<div class="tab-pane fade" id="tab-plain-content-3" role="tabpanel" aria-labelledby="tab-plain-3">
<p>...</p>
</div>
</div>