---

categories: [Layouts]

css-extra: false

layout: layout

title: Tab

resource: true

url-js-extra: '!URL_COMPONENTS!datatables/media/js/jquery.dataTables.js'

weight: 5

---

{% include layouts-navbar-primary.html %}

<div class="container-fluid">

<div class="row">

<div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2">

<ol class="breadcrumb">

<li><a href="#">Home</a></li>

<li>{{ page.title }}</li>

</ol>

<h1>{{ page.title }}</h1>

<!--Note: the markup semantics used to create "nested" tabs are sub-optimal in order to easily achieve a responsive layout.-->

<ul class="nav nav-tabs">

<li class="active"><a href="#">Tab One</a></li>

<li><a href="#">Tab Two</a></li>

<li><a href="#">Tab Three</a></li>

<li><a href="#">Tab Four</a></li>

<li><a href="#">Tab Five</a></li>

<li><a href="#">Tab Six</a></li>

<li><a href="#">Tab Seven</a></li>

</ul>

<ul class="nav nav-tabs nav-tabs-pf">

<li class="active"><a href="#">Secondary Tab One</a></li>

<li><a href="#">Secondary Tab Two</a></li>

<li><a href="#">Secondary Tab Three</a></li>

<li><a href="#">Secondary Tab Four</a></li>

<li><a href="#">Secondary Tab Five</a></li>

</ul>

{% include datatable.html %}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget eros tincidunt, semper ante nec, dapibus ante.</p>

</div><!-- /col -->

<div class="col-sm-3 col-md-2 col-sm-pull-9 col-md-pull-10 sidebar-pf sidebar-pf-left">

<div class="nav-category">

<h2>First Category</h2>

<ul class="nav nav-pills nav-stacked">

<li class="active"><a href="#"><i class="fa fa-desktop"></i>System Information</a></li>

<li><a href="#"><i class="fa fa-cog"></i>System Services</a></li>

<li><a href="#"><i class="fa fa-file-text-o"></i>Journal</a></li>

<li><a href="#"><i class="fa fa-cloud"></i>Storage</a></li>

</ul>

</div>

<div class="nav-category">

<h2>Second Category</h2>

<ul class="nav nav-pills nav-stacked">

<li><a href="#">User Accounts</a></li>

<li><a href="#">Containers</a></li>

<li><a href="#">Shutdown and Reboot</a></li>

</ul>

</div>

</div><!-- /col -->

</div><!-- /row -->

</div><!-- /container -->

<script>

// Initialize Datatables

$(document).ready( function() {

$('.datatable').dataTable({

"fnDrawCallback": function( oSettings ) {

// if .sidebar-pf exists, call sidebar() after the data table is drawn

if ($('.sidebar-pf').length > 0) {

$(document).sidebar();

}

}

});

});

</script>