Bootstrap Navs
component with a variety of options to provide unique looking Line Tab components that matches Keen's design standards.
<div class="card card-custom">
<div class="card-header card-header-tabs-line">
<div class="card-title">
<h3 class="card-label">Card Title</h3>
</div>
<div class="card-toolbar">
<ul class="nav nav-tabs nav-bold nav-tabs-line">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_1_2">Week</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_2_2">Month</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">Year</a>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_2">Action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_2">Another action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_2">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_2">Separated link</a>
</div>
</li>
</ul>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="kt_tab_pane_1_2" role="tabpanel">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_2_2" role="tabpanel">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_3_2" role="tabpanel">
...
</div>
</div>
</div>
</div>
<div class="card card-custom">
<div class="card-header card-header-tabs-line">
<div class="card-title">
<h3 class="card-label">Card Title With Icons</h3>
</div>
<div class="card-toolbar">
<ul class="nav nav-tabs nav-bold nav-tabs-line">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_1_3">
<span class="nav-icon"><i class="flaticon2-chat-1"></i></span>
<span class="nav-text">Week</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_2_3">
<span class="nav-icon"><i class="flaticon2-drop"></i></span>
<span class="nav-text">Month</span>
</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">
<span class="nav-icon"><i class="flaticon2-gear"></i></span>
<span class="nav-text">Year</span>
</a>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_3">Action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_3">Another action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_3">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_3">Separated link</a>
</div>
</li>
</ul>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="kt_tab_pane_1_3" role="tabpanel" aria-labelledby="kt_tab_pane_1_3">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_2_3" role="tabpanel" aria-labelledby="kt_tab_pane_2_3">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_3_3" role="tabpanel" aria-labelledby="kt_tab_pane_3_3">
...
</div>
</div>
</div>
</div>
<div class="card card-custom">
<div class="card-header card-header-tabs-line">
<div class="card-toolbar">
<ul class="nav nav-tabs nav-bold nav-tabs-line">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_1_4">
<span class="nav-icon"><i class="flaticon2-chat-1"></i></span>
<span class="nav-text">Week</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_2_4">
<span class="nav-icon"><i class="flaticon2-drop"></i></span>
<span class="nav-text">Month</span>
</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">
<span class="nav-icon"><i class="flaticon2-gear"></i></span>
<span class="nav-text">Year</span>
</a>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-left">
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_4">Action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_4">Another action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_4">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_4">Separated link</a>
</div>
</li>
</ul>
</div>
<div class="card-toolbar">
<div class="dropdown dropdown-inline">
<button type="button" class="btn btn-hover-light-primary btn-icon btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ki ki-bold-more-hor "></i>
</button>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
<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>
</div>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="kt_tab_pane_1_4" role="tabpanel" aria-labelledby="kt_tab_pane_1_4">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_2_4" role="tabpanel" aria-labelledby="kt_tab_pane_2_4">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_3_4" role="tabpanel" aria-labelledby="kt_tab_pane_3_4">
...
</div>
</div>
</div>
</div>
<div class="card card-custom">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">Card Title</h3>
</div>
<div class="card-toolbar">
<ul class="nav nav-bold nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_7_1">Week</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_7_2">Month</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">
Year
</a>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_7_3">Action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_7_3">Another action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_7_3">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_7_3">Separated link</a>
</div>
</li>
</ul>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="kt_tab_pane_7_1" role="tabpanel" aria-labelledby="kt_tab_pane_7_1">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_7_2" role="tabpanel" aria-labelledby="kt_tab_pane_7_2">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_7_3" role="tabpanel" aria-labelledby="kt_tab_pane_7_3">
...
</div>
</div>
</div>
</div>
<div class="card card-custom">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">Card Title With Icons</h3>
</div>
<div class="card-toolbar">
<ul class="nav nav-light-success nav-bold nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_4_1">
<span class="nav-icon"><i class="flaticon2-chat-1"></i></span>
<span class="nav-text">Week</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_4_2">
<span class="nav-icon"><i class="flaticon2-drop"></i></span>
<span class="nav-text">Month</span>
</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">
<span class="nav-icon"><i class="flaticon2-gear"></i></span>
<span class="nav-text">Year</span>
</a>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_4_3">Action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_4_3">Another action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_4_3">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_4_3">Separated link</a>
</div>
</li>
</ul>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="kt_tab_pane_4_1" role="tabpanel" aria-labelledby="kt_tab_pane_4_1">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_4_2" role="tabpanel" aria-labelledby="kt_tab_pane_4_2">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_4_3" role="tabpanel" aria-labelledby="kt_tab_pane_4_3">
...
</div>
</div>
</div>
</div>
<div class="card card-custom">
<div class="card-header">
<div class="card-toolbar">
<ul class="nav nav-light-danger nav-bold nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_5_1">
<span class="nav-icon"><i class="flaticon2-chat-1"></i></span>
<span class="nav-text">Week</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_5_2">
<span class="nav-icon"><i class="flaticon2-drop"></i></span>
<span class="nav-text">Month</span>
</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">
<span class="nav-icon"><i class="flaticon2-gear"></i></span>
<span class="nav-text">Year</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_5_3">Action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_5_3">Another action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_5_3">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_5_3">Separated link</a>
</div>
</li>
</ul>
</div>
<div class="card-toolbar">
<div class="dropdown dropdown-inline">
<button type="button" class="btn btn-hover-light-primary btn-icon btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ki ki-bold-more-hor "></i>
</button>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
<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>
</div>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="kt_tab_pane_5_1" role="tabpanel" aria-labelledby="kt_tab_pane_5_1">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_5_2" role="tabpanel" aria-labelledby="kt_tab_pane_5_2">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_5_3" role="tabpanel" aria-labelledby="kt_tab_pane_5_3">
...
</div>
</div>
</div>
</div>
Lorem Ipsum is simply dummy text of the printing and industry.
There are many variations of passages of Lorem Ipsum available.
Contrary to popular belief, Lorem Ipsum is not simply random text.
If you are going to use a passage of Lorem Ipsum, you need.
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details