---
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>