<div class="panel-group" id="accordion-markup" style="width:240px">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion-markup" href="#collapseOne">
          Lorem ipsum
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
         Praesent sagittis est et arcu fringilla placerat. Cras erat ante, dapibus non mauris ac, volutpat sollicitudin ligula. Morbi gravida nisl vel risus tempor, sit amet luctus erat tempus. Curabitur blandit sem non pretium bibendum. Donec eleifend non turpis vitae vestibulum. Vestibulum ut sem ac nunc posuere blandit sed porta lorem. Cras rutrum velit vel leo iaculis imperdiet.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion-markup" href="#collapseTwo" class="collapsed">
          Dolor sit amet
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Donec consequat dignissim neque, sed suscipit quam egestas in. Fusce bibendum laoreet lectus commodo interdum. Vestibulum odio ipsum, tristique et ante vel, iaculis placerat nulla. Suspendisse iaculis urna feugiat lorem semper, ut iaculis risus tempus.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion-markup" href="#collapseThree" class="collapsed">
          Consectetur
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Curabitur nisl quam, interdum a venenatis a, consequat a ligula. Nunc nec lorem in erat rhoncus lacinia at ac orci. Sed nec augue congue, vehicula justo quis, venenatis turpis. Nunc quis consectetur purus. Nam vitae viverra lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu augue felis. Maecenas in dignissim purus, quis pulvinar lectus. Vivamus euismod ultrices diam, in mattis nibh.
      </div>
    </div>
  </div>
</div>

<div class="alert alert-danger">
  <span class="pficon pficon-error-circle-o"></span>
  <strong>Hey there is a problem!</strong> Yeah this is really messed up and you should <a href="#" class="alert-link">know about it</a>.
</div>
<div class="alert alert-warning">
  <span class="pficon pficon-warning-triangle-o"></span>
  <strong>There might be a problem here!</strong> We are not really sure, but <a href="#" class="alert-link">it might be bad</a>.
</div>
<div class="alert alert-success">
  <span class="pficon pficon-ok"></span>
  <strong>Great job!</strong> This is really working out <a href="#" class="alert-link">great for us</a>.
</div>
<div class="alert alert-info">
  <span class="pficon pficon-info"></span>
  <strong>This is some general information.</strong> You should <a href="#" class="alert-link">know about this</a>.
</div>
<div class="alert alert-danger alert-dismissable">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
    <span class="pficon pficon-close"></span>
  </button>
  <span class="pficon pficon-error-circle-o"></span>
  <strong>Hey there is a problem!</strong> Yeah this is really messed up and you should <a href="#" class="alert-link">know about it</a>.
</div>

<a href="#">Inbox <span class="badge">42</span></a>

<label>State</label>
  <select class="combobox form-control">
    <option value="" selected="selected">Select a State</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    <option value="CO">Colorado</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="DC">District Of Columbia</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="HI">Hawaii</option>
    <option value="ID">Idaho</option>
    <option value="IL">Illinois</option>
    <option value="IN">Indiana</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NV">Nevada</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NM">New Mexico</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="ND">North Dakota</option>
    <option value="OH">Ohio</option>
    <option value="OK">Oklahoma</option>
    <option value="OR">Oregon</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="SD">South Dakota</option>
    <option value="TN">Tennessee</option>
    <option value="TX">Texas</option>
    <option value="UT">Utah</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WA">Washington</option>
    <option value="WV">West Virginia</option>
    <option value="WI">Wisconsin</option>
    <option value="WY">Wyoming</option>
  </select>
</div>
<script src="/components/bootstrap-combobox/js/bootstrap-combobox.js"></script>
<script>
  // Initialize Boostrap-Combobox
  $('.combobox').combobox();
</script>

<input type="text" class="form-control bootstrap-datepicker">
<script src="/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script>
  // Initialize Boostrap-datepicker
  $('.bootstrap-datepicker').datepicker({
    autoclose: true,
    todayBtn: "linked",
    todayHighlight: true
  });
</script>

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
  <option disabled>Onions</option>
</select>
<select class="selectpicker" multiple>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
  <option disabled>Onions</option>
</select>
<script src="/components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script>
  // Initialize Boostrap-select
   $('.selectpicker').selectpicker();
</script>

<input class="bootstrap-switch" id="bootstrap-switch-state" type="checkbox" checked>
<script>
  jQuery(".bootstrap-switch").bootstrapSwitch();
</script>
<script src="/components/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>

<input class="bootstrap-touchspin" id="bootstrap-touchspin-empty" type="text" value="" name="bootstrap-touchspin-empty">
<script>
    $(".bootstrap-touchspin").TouchSpin();
</script>
<script src="/components/bootstrap-touchspin/dist/js/jquery.bootstrap-touchspin.min.js"></script>

<div id="treeview1"></div>
<script src="/components/patternfly-bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
<script>
  $(function() {
    var defaultData = [
      {
        text: 'Parent 1',
        href: '#parent1',
        tags: ['4'],
        nodes: [
          {
            text: 'Child 1',
            href: '#child1',
            icon: 'fa fa-file-o',
            tags: ['2'],
            nodes: [
              {
                text: 'Grandchild 1',
                href: '#grandchild1',
                icon: 'fa fa-file-o',
                tags: ['0']
              },
              {
                text: 'Grandchild 2',
                href: '#grandchild2',
                icon: 'fa fa-file-o',
                tags: ['0']
              }
            ]
          },
          {
            text: 'Child 2',
            href: '#child2',
            icon: 'fa fa-file-o',
            tags: ['0']
          }
        ]
      },
      {
        text: 'Parent 2',
        href: '#parent2',
        tags: ['0']
      },
      {
        text: 'Parent 3',
        href: '#parent3',
         tags: ['0']
      },
      {
        text: 'Parent 4',
        href: '#parent4',
        tags: ['0']
      },
      {
        text: 'Parent 5',
        href: '#parent5'  ,
        tags: ['0']
      }
    ];
    $('#treeview1').treeview({
      collapseIcon: "fa fa-angle-down",
      data: defaultData,
      expandIcon: "fa fa-angle-right",
      nodeIcon: "fa fa-folder",
      showBorder: false
    });
  });
</script>

<ol class="breadcrumb">
  <li>
    <a href="#">Back to Top Level</a>
  </li>
  <li>
    <a href="#">Second Level</a>
  </li>
  <li>
    <a href="#">Third Level</a>
  </li>
  <li class="active"> <strong>Fourth Level:</strong>
    Detail about fourth level
  </li>
</ol>

<p>
  <button class="btn btn-default" type="button">Secondary</button>
  <button class="btn btn-primary" type="button">Primary</button>
  <button class="btn btn-danger" type="button">Destructive</button>
</p>
<p>
  <button class="btn btn-default btn-lg " type="button">Secondary Large</button>
  <button class="btn btn-primary btn-lg " type="button">Primary Large</button>
  <button class="btn btn-danger btn-lg" type="button">Destructive Large</button>
</p>
<p>
  <button class="btn btn-default btn-xs" type="button">Secondary Extra Small</button>
  <button class="btn btn-primary btn-xs" type="button">Primary Extra Small</button>
  <button class="btn btn-danger btn-xs" type="button">Destructive Extra Small</button>
</p>

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

<form>
  <div class="form-group">
    <label for="messageArea"></label>
    <textarea class="form-control" id="messageArea" name="text" placeholder="Type in your message"
              rows="5"></textarea>
  </div>
  <span class="pull-right chars-remaining-pf">
    <span id="charRemainingCntFld"></span>
    <button id="postBtn" type="submit" class="btn btn-default">Post New Message</button>
  </span>
</form>
<script>
  (function($) {
    // countFld is the id of the field where you want the 'remaining chars. count' number
    // to be displayed.
    $('#messageArea').countRemainingChars( {countFld: 'charRemainingCntFld',
                                            charsMaxLimit: 100,
                                            charsWarnRemaining: 5,
                                            blockInputAtMaxLimit: false} );

    // taId is the id of the textArea field which triggered the event
    $('#messageArea').on("overCharsMaxLimitEvent", function( event, taId ) {
      $('#postBtn').prop("disabled",true);
    });
    $('#messageArea').on("underCharsMaxLimitEvent", function( event, taId) {
      $('#postBtn').prop("disabled",false);
    });
  })(jQuery);
</script>

<!-- Toolbar -->
<div class="row toolbar-pf table-view-pf-toolbar" id="toolbar1">
  <div class="col-sm-12">
    <form class="toolbar-pf-actions">
      <div class="form-group toolbar-pf-filter">
        <label class="sr-only" for="filter">Rendering Engine</label>
        <div class="input-group">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" id="filter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rendering Engine <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#" id="filter1">Rendering Engine</a></li>
              <li><a href="#" id="filter2">Browser</a></li>
              <li><a href="#" id="filter3">Platform(s)</a></li>
              <li><a href="#" id="filter4">Engine Version</a></li>
              <li><a href="#" id="filter5">CSS Grade</a></li>
            </ul>
          </div>
          <input type="text" class="form-control" placeholder="Filter By Rendering Engine..." autocomplete="off" id="filterInput">
        </div>
      </div>
      <div class="form-group">
        <button class="btn btn-default" type="button" id="deleteRows1">Delete Rows</button>
        <button class="btn btn-default" type="button" id="restoreRows1" disabled>Restore Rows</button>
        <div class="dropdown btn-group  dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebab" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu " aria-labelledby="dropdownKebab">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

      </div>
      <div class="toolbar-pf-action-right">
        <div class="form-group toolbar-pf-find">
          <button class="btn btn-link btn-find" type="button">
            <span class="fa fa-search"></span>
          </button>
          <div class="find-pf-dropdown-container">
            <input type="text" class="form-control" id="find" placeholder="Find By Keyword...">
            <div class="find-pf-buttons">
              <span class="find-pf-nums">1 of 3</span>
              <button class="btn btn-link" type="button">
                <span class="fa fa-angle-up"></span>
              </button>
              <button class="btn btn-link" type="button">
                <span class="fa fa-angle-down"></span>
              </button>
              <button class="btn btn-link btn-find-close" type="button">
                <span class="pficon pficon-close"></span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </form>
    <div class="row toolbar-pf-results">
      <div class="col-sm-9">
        <div class="hidden">
          <h5>0 Results</h5>
          <p>Active filters:</p>
          <ul class="list-inline"></ul>
          <p><a href="#">Clear All Filters</a></p>
        </div>
      </div>
      <div class="col-sm-3 table-view-pf-select-results">
        <strong>0</strong> of <strong>0</strong> selected
      </div>
    </div>
  </div>
</div>

<!-- Table HTML -->
<table class="table table-striped table-bordered table-hover" id="table1">
  <thead>
    <tr>
      <th><label class="sr-only" for="selectAll">Select all rows</label><input type="checkbox" id="selectAll" name="selectAll"></th>
      <th>Rendering Engine</th>
      <th>Browser</th>
      <th>Platform(s)</th>
      <th>Engine Version</th>
      <th>CSS Grade</th>
      <th colspan="2">Actions</th>
    </tr>
  </thead>
</table>

<form class="content-view-pf-pagination table-view-pf-pagination clearfix" id="pagination1">
  <div class="form-group">
    <select class="selectpicker pagination-pf-pagesize">
      <option value="6">6</option>
      <option value="10" >10</option>
      <option value="15" selected="selected">15</option>
      <option value="25">25</option>
      <option value="50">50</option>
    </select>
    <span>per page</span>
  </div>
  <div class="form-group">
    <span><span class="pagination-pf-items-current">1-15</span> of <span class="pagination-pf-items-total">75</span></span>
    <ul class="pagination pagination-pf-back">
      <li class="disabled"><a href="#" title="First Page"><span class="i fa fa-angle-double-left"></span></a></li>
      <li class="disabled"><a href="#" title="Previous Page"><span class="i fa fa-angle-left"></span></a></li>
    </ul>
    <label for="pagination1-page" class="sr-only">Current Page</label>
    <input class="pagination-pf-page" type="text" value="1" id="pagination1-page"/>
    <span>of <span class="pagination-pf-pages">5</span></span>
    <ul class="pagination pagination-pf-forward">
      <li><a href="#" title="Next Page"><span class="i fa fa-angle-right"></span></a></li>
      <li><a href="#" title="Last Page"><span class="i fa fa-angle-double-right"></span></a></li>
    </ul>
  </div>
</form>

<!-- Blank Slate HTML -->
<div class="blank-slate-pf table-view-pf-empty hidden" id="emptyState1">
  <div class="blank-slate-pf-icon">
    <span class="pficon pficon pficon-add-circle-o"></span>
  </div>
  <h1>
    Empty State Title
  </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <p>
    Learn more about this <a href="#">in the documentation</a>.
  </p>
  <div class="blank-slate-pf-main-action">
    <button class="btn btn-primary btn-lg"> Main Action </button>
  </div>
  <div class="blank-slate-pf-secondary-action">
    <button class="btn btn-default">Secondary Action</button>
    <button class="btn btn-default">Secondary Action</button>
  </div>
</div>

<script>
$(document).ready(function() {

// JSON data for Table View
var dataSet = [{
  engine: "Trident",
  browser: "Internet Explorer 4.0",
  platforms: "Win 95+",
  version: "4",
  grade: "X"
},{
  engine: "Trident",
  browser: "Internet Explorer 5.0",
  platforms: "Win 95+",
  version: "5",
  grade: "C"
}, {
  engine: "Trident",
  browser: "Internet Explorer 5.5",
  platforms: "Win 95+",
  version: "5.5",
  grade: "A"
}, {
  engine: "Trident",
  browser: "Internet Explorer 6",
  platforms: "Win 98+",
  version: "6",
  grade: "A"
}, {
  engine: "Trident",
  browser: "Internet Explorer 7",
  platforms: "Win XP SP2+",
  version: "7",
  grade: "A"
}, {
  engine: "Trident",
  browser: "AOL browser (AOL desktop)",
  platforms: "Win XP",
  version: "6",
  grade: "A"
}, {
  engine: "Gecko",
  browser: "Firefox 1.0",
  platforms: "Win 98+ / OSX.2+",
  version: "1.7",
  grade: "A"
}, {
  engine: "Gecko",
  browser: "Firefox 1.5",
  platforms: "Win 98+ / OSX.2+",
  version: "1.8",
  grade: "A"
}, {
  engine: "Gecko",
  browser: "Firefox 2.0",
  platforms: "Win 98+ / OSX.2+",
  version: "1.8",
  grade: "A"
}, {
  engine: "Gecko",
  browser: "Firefox 3.0",
  platforms: "Win 2k+ / OSX.3+",
  version: "1.9",
  grade: "A"
}, {
  engine: "Gecko",
  browser: "Camino 1.0",
  platforms: "OSX.2+",
  version: "1.8",
  grade: "A"
}, {
  engine: "Gecko",
  browser: "Camino 1.5",
  platforms: "OSX.3+",
  version: "1.8",
  grade: "A"
}, {
  engine: "Gecko",
  browser: "Netscape 7.2",
  platforms: "Win 95+ / Mac OS 8.6-9.2",
  version: "1.7",
  grade: "A"
}, {
  engine: "Gecko",
  browser: "Netscape Browser 8",
  platforms: "Win 98SE+",
  version: "1.7",
  grade: "A"
}, {
  engine: "Gecko",
  browser: "Netscape Navigator 9",
  platforms: "Win 98+ / OSX.2+",
  version: "1.8",
  grade: "A"
}, {
  engine: "Gecko",
  browser: "Mozilla 1.0",
  platforms: "Win 95+ / OSX.1+",
  version: "1",
  grade: "A"
}, {
  engine: "Gecko",
  browser: "Mozilla 1.1",
  platforms: "Win 95+ / OSX.1+",
  version: "1.1",
  grade: "A"
}, {
  engine: "Gecko",
  browser: "Mozilla 1.2",
  platforms: "Win 95+ / OSX.1+",
  version: "1.2",
  grade: "A"
}, {
  engine: "Gecko",
  browser: "Mozilla 1.3",
  platforms: "Win 95+ / OSX.1+",
  version: "1.3",
  grade: "A"
}, {
  engine: "Gecko",
  browser: "Mozilla 1.4",
  platforms: "Win 95+ / OSX.1+",
  version: "1.4",
  grade: "A"
}, {
  engine: "Gecko",
  browser: "Mozilla 1.5",
  platforms: "Win 95+ / OSX.1+",
  version: "1.5",
  grade: "A"
}, {
  engine: "Gecko",
  browser: "Mozilla 1.6",
  platforms: "Win 95+ / OSX.1+",
  version: "1.6",
  grade: "A"
}, {
  engine: "Gecko",
  browser: "Mozilla 1.7",
  platforms: "Win 98+ / OSX.1+",
  version: "1.7",
  grade: "A"
}, {
  engine: "Gecko",
  browser: "Mozilla 1.8",
  platforms: "Win 98+ / OSX.1+",
  version: "1.8",
  grade: "A"
}, {
  engine: "Gecko",
  browser: "Seamonkey 1.1",
  platforms: "Win 98+ / OSX.2+",
  version: "1.8",
  grade: "A"
}, {
  engine: "Gecko",
  browser: "Epiphany 2.20",
  platforms: "Gnome",
  version: "1.8",
  grade: "A"
}, {
  engine: "Webkit",
  browser: "Safari 1.2",
  platforms: "OSX.3",
  version: "125.5",
  grade: "A"
}, {
  engine: "Webkit",
  browser: "Safari 1.3",
  platforms: "OSX.3",
  version: "312.8",
  grade: "A"
}, {
  engine: "Webkit",
  browser: "Safari 2.0",
  platforms: "OSX.4+",
  version: "419.3",
  grade: "A"
}, {
  engine: "Webkit",
  browser: "Safari 3.0",
  platforms: "OSX.4+",
  version: "522.1",
  grade: "A"
}, {
  engine: "Webkit",
  browser: "OmniWeb 5.5",
  platforms: "OSX.4+",
  version: "420",
  grade: "A"
}, {
  engine: "Webkit",
  browser: "iPod Touch / iPhone",
  platforms: "iPod",
  version: "420.1",
  grade: "A"
}, {
  engine: "Webkit",
  browser: "S60",
  platforms: "S60",
  version: "413",
  grade: "A"
}, {
  engine: "Presto",
  browser: "Opera 7.0",
  platforms: "Win 95+ / OSX.1+",
  version: "-",
  grade: "A"
}, {
  engine: "Presto",
  browser: "Opera 7.5",
  platforms: "Win 95+ / OSX.2+",
  version: "-",
  grade: "A"
}, {
  engine: "Presto",
  browser: "Opera 8.0",
  platforms: "Win 95+ / OSX.2+",
  version: "-",
  grade: "A"
}, {
  engine: "Presto",
  browser: "Opera 8.5",
  platforms: "Win 95+ / OSX.2+",
  version: "-",
  grade: "A"
}, {
  engine: "Presto",
  browser: "Opera 9.0",
  platforms: "Win 95+ / OSX.3+",
  version: "-",
  grade: "A"
}, {
  engine: "Presto",
  browser: "Opera 9.2",
  platforms: "Win 88+ / OSX.3+",
  version: "-",
  grade: "A"
}, {
  engine: "Presto",
  browser: "Opera 9.5",
  platforms: "Win 88+ / OSX.3+",
  version: "-",
  grade: "A"
}, {
  engine: "Presto",
  browser: "Opera for Wii",
  platforms: "Wii",
  version: "-",
  grade: "A"
}, {
  engine: "Presto",
  browser: "Nokia N800",
  platforms: "N800",
  version: "-",
  grade: "A"
}, {
  engine: "Presto",
  browser: "Nintendo DS browser",
  platforms: "Nintendo DS",
  version: "8.5",
  grade: "C/A<sup>1</sup>"
}, {
  engine: "KHTML",
  browser: "Konqureror 3.1",
  platforms: "KDE 3.1",
  version: "3.1",
  grade: "C"
}, {
  engine: "KHTML",
  browser: "Konqureror 3.3",
  platforms: "KDE 3.3",
  version: "3.3",
  grade: "A"
}, {
  engine: "KHTML",
  browser: "Konqureror 3.5",
  platforms: "KDE 3.5",
  version: "3.5",
  grade: "A"
}, {
  engine: "Tasman",
  browser: "Internet Explorer 4.5",
  platforms: "Mac OS 8-9",
  version: "-",
  grade: "X"
}, {
  engine: "Tasman",
  browser: "Internet Explorer 5.1",
  platforms: "Mac OS 7.6-9",
  version: "1",
  grade: "C"
}, {
  engine: "Tasman",
  browser: "Internet Explorer 5.2",
  platforms: "Mac OS 8-X",
  version: "1",
  grade: "C"
}, {
  engine: "Misc",
  browser: "NetFront 3.1",
  platforms: "Embedded devices",
  version: "-",
  grade: "C"
}, {
  engine: "Misc",
  browser: "NetFront 3.4",
  platforms: "Embedded devices",
  version: "-",
  grade: "A"
}, {
  engine: "Misc",
  browser: "Dillo 0.8",
  platforms: "Embedded devices",
  version: "-",
  grade: "X"
}, {
  engine: "Misc",
  browser: "Links",
  platforms: "Text only",
  version: "-",
  grade: "X"
}, {
  engine: "Misc",
  browser: "Lynx",
  platforms: "Text only",
  version: "-",
  grade: "X"
}, {
  engine: "Misc",
  browser: "IE Mobile",
  platforms: "Windows Mobile 6",
  version: "-",
  grade: "C"
}, {
  engine: "Misc",
  browser: "PSP browser",
  platforms: "PSP",
  version: "-",
  grade: "C"
}, {
  engine: "Other browsers",
  browser: "All others",
  platforms: "-",
  version: "-",
  grade: "U"
}];

// DataTable Config
$("#table1").DataTable({
  columns: [
    { data: null,
      className: "table-view-pf-select",
      render: function (data, type, full, meta) {
        // Select row checkbox renderer
        var id = "select" + meta.row;
        return '<label class="sr-only" for="' + id + '">Select row ' + meta.row +
          '</label><input type="checkbox" id="' + id + '" name="' + id + '">';
      },
      sortable: false
    },
    { data: "engine" },
    { data: "browser" },
    { data: "platforms" },
    { data: "version" },
    { data: "grade"},
    { data: null,
      className: "table-view-pf-actions",
      render: function (data, type, full, meta) {
        // Inline action button renderer
        return '<div class="table-view-pf-btn"><button class="btn btn-default" type="button">Actions</button></div>';
      }
    }, {
      data: null,
      className: "table-view-pf-actions",
      render: function (data, type, full, meta) {
        // Inline action kebab renderer
        return '<div class="dropdown dropdown-kebab-pf">' +
          '<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">' +
          '<span class="fa fa-ellipsis-v"></span></button>' +
          '<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">' +
          '<li><a href="#">Action</a></li>' +
          '<li><a href="#">Another action</a></li>' +
          '<li><a href="#">Something else here</a></li>' +
          '<li role="separator" class="divider"></li>' +
          '<li><a href="#">Separated link</a></li></ul></div>';
      }
    }
  ],
  data: dataSet,
  dom: "t",
  language: {
    zeroRecords: "No records found"
  },
  order: [[ 1, 'asc' ]],
  pfConfig: {
    emptyStateSelector: "#emptyState1",
    filterCaseInsensitive: true,
    filterCols: [
      null,
      {
        default: true,
        optionSelector: "#filter1",
        placeholder: "Filter By Rendering Engine..."
      }, {
        optionSelector: "#filter2",
        placeholder: "Filter By Browser..."
      }, {
        optionSelector: "#filter3",
        placeholder: "Filter By Platform(s)..."
      }, {
        optionSelector: "#filter4",
        placeholder: "Filter By Engine Version..."
      }, {
        optionSelector: "#filter5",
        placeholder: "Filter By CSS Grade..."
      }
    ],
    paginationSelector: "#pagination1",
    toolbarSelector: "#toolbar1",
    selectAllSelector: 'th:first-child input[type="checkbox"]',
    colvisMenuSelector: '.table-view-pf-colvis-menu'
  },
  select: {
    selector: 'td:first-child input[type="checkbox"]',
    style: 'multi'
  },
});

/**
 * Utility to show empty Table View
 *
 * @param {object} config - Config properties associated with a Table View
 * @param {object} config.data - Data set for DataTable
 * @param {string} config.deleteRowsSelector - Selector for delete rows control
 * @param {string} config.restoreRowsSelector - Selector for restore rows control
 * @param {string} config.tableSelector - Selector for the HTML table
 */
var emptyTableViewUtil = function (config) {
  var self = this;

  this.dt = $(config.tableSelector).DataTable(); // DataTable
  this.deleteRows = $(config.deleteRowsSelector); // Delete rows control
  this.restoreRows = $(config.restoreRowsSelector); // Restore rows control

  // Handle click on delete rows control
  this.deleteRows.on('click', function() {
    self.dt.clear().draw();
    $(self.restoreRows).prop("disabled", false);
  });

  // Handle click on restore rows control
  this.restoreRows.on('click', function() {
    self.dt.rows.add(config.data).draw();
    $(this).prop("disabled", true);
  });

  // Initialize restore rows
  if (this.dt.data().length === 0) {
    $(this.restoreRows).prop("disabled", false);
  }
};

// Initialize empty Table View util
new emptyTableViewUtil({
  data: dataSet,
  deleteRowsSelector: "#deleteRows1",
  restoreRowsSelector: "#restoreRows1",
  tableSelector: "#table1"
});

/**
 * Utility to find items in Table View
 */
var findTableViewUtil = function (config) {
  // Upon clicking the find button, show the find dropdown content
  $(".btn-find").click(function () {
    $(this).parent().find(".find-pf-dropdown-container").toggle();
  });

  // Upon clicking the find close button, hide the find dropdown content
  $(".btn-find-close").click(function () {
    $(".find-pf-dropdown-container").hide();
  });
};

// Initialize find util
new findTableViewUtil();

});
</script>


<script src="/components/datatables/media/js/jquery.dataTables.js"></script>
<script>
  // Initialize Datatables
  $(document).ready(function() {
    $('.datatable').dataTable();
  });
</script>

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

        <div class="panel-group" id="fixed-accordion" style="height: 350px;">
          <div class="panel panel-default">
            <div class="panel-heading" data-component="collapse-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#fixed-accordion" href="#fixedCollapseOne">
                  Lorem ipsum
                </a>
              </h4>
            </div>
            <div id="fixedCollapseOne" class="panel-collapse collapse in">
              <div class="panel-body">
                Praesent sagittis est et arcu fringilla placerat. Cras erat ante, dapibus non mauris ac, volutpat sollicitudin ligula. Morbi gravida nisl vel risus tempor, sit amet luctus erat tempus. Curabitur blandit sem non pretium bibendum. Donec eleifend non turpis vitae vestibulum. Vestibulum ut sem ac nunc posuere blandit sed porta lorem. Cras rutrum velit vel leo iaculis imperdiet.
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" data-component="collapse-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#fixed-accordion" href="#fixedCollapseTwo" class="collapsed">
                  Dolor sit amet
                </a>
              </h4>
            </div>
            <div id="fixedCollapseTwo" class="panel-collapse collapse">
              <div class="panel-body">
                Donec consequat dignissim neque, sed suscipit quam egestas in. Fusce bibendum laoreet lectus commodo interdum. Vestibulum odio ipsum, tristique et ante vel, iaculis placerat nulla. Suspendisse iaculis urna feugiat lorem semper, ut iaculis risus tempus.
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" data-component="collapse-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#fixed-accordion" href="#fixedCollapseThree" class="collapsed">
                  Consectetur
                </a>
              </h4>
            </div>
            <div id="fixedCollapseThree" class="panel-collapse collapse">
              <div class="panel-body">
                Curabitur nisl quam, interdum a venenatis a, consequat a ligula. Nunc nec lorem in erat rhoncus lacinia at ac orci. Sed nec augue congue, vehicula justo quis, venenatis turpis. Nunc quis consectetur purus. Nam vitae viverra lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu augue felis. Maecenas in dignissim purus, quis pulvinar lectus. Vivamus euismod ultrices diam, in mattis nibh.
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" data-component="collapse-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#fixed-accordion" href="#fixedCollapseFour" class="collapsed">
                  Adipisicing elit
                </a>
              </h4>
            </div>
            <div id="fixedCollapseFour" class="panel-collapse collapse">
              <div class="panel-body">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" data-component="collapse-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#fixed-accordion" href="#fixedCollapseFive" class="collapsed">
                  Suspendisse lectus tortor
                </a>
              </h4>
            </div>
            <div id="fixedCollapseFive" class="panel-collapse collapse">
              <div class="panel-body">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" data-component="collapse-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#fixed-accordion" href="#fixedCollapseSix" class="collapsed">
                  Velit mauris
                </a>
              </h4>
            </div>
            <div id="fixedCollapseSix" class="panel-collapse collapse">
              <div class="panel-body">
                Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" data-component="collapse-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#fixed-accordion" href="#fixedCollapseSeven" class="collapsed">
                  Aliquam convallis
                </a>
              </h4>
            </div>
            <div id="fixedCollapseSeven" class="panel-collapse collapse">
              <div class="panel-body">
                Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" data-component="collapse-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#fixed-accordion" href="#fixedCollapseEight" class="collapsed">
                  Vulputate dictum
                </a>
              </h4>
            </div>
            <div id="fixedCollapseEight" class="panel-collapse collapse">
              <div class="panel-body">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus rutrum interdum. Pellentesque lorem. Curabitur sit amet erat quis risus feugiat viverra. Pellentesque augue justo, sagittis et, lacinia at, venenatis non, arcu. Nunc nec libero. In cursus dictum risus. Etiam tristique nisl a nulla. Ut a orci. Curabitur dolor nunc, egestas at, accumsan at, malesuada nec, magna.
              </div>
            </div>
          </div>
        </div>
        <script>
          $(document).ready(function() {
            $('#fixed-accordion').initCollapseHeights();
          });
        </script>
        

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label" for="textInput-markup">Default</label>
    <div class="col-sm-10">
      <input type="text" id="textInput-markup" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label" for="textInputDisabled-markup">Disabled</label>
    <div class="col-sm-10">
      <input type="text" id="textInputDisabled-markup" class="form-control" disabled>
    </div>
  </div>
  <div class="form-group has-error">
    <label class="col-sm-2 control-label" for="inputError-markup">With error</label>
    <div class="col-sm-10">
      <input type="text" id="inputError-markup" class="form-control">
      <span class="help-block">Please correct the error</span>
    </div>
  </div>
</form>

<pre class="prettyprint">
<p class="my-class">Sample text here...</p>
</pre>
<script src="/components/google-code-prettify/bin/prettify.min.js"></script>
<script>
  (function($) {
    $(document).ready(function(){
      prettyPrint();
    });
  })(jQuery);
</script>

<nav class="navbar navbar-default navbar-pf" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="/">
      <img src="assets/img/brand-alt.svg" alt="PatternFly Enterprise Application" />
    </a>
  </div>
  <div class="collapse navbar-collapse navbar-collapse-1">
    <ul class="nav navbar-nav navbar-utility">
      <li class="dropdown">
        <a href="#" data-toggle="dropdown">
          <span class="pficon pficon-info"></span>
          Messages: <strong>2</strong>
        </a>
        <div class="dropdown-menu infotip bottom-right">
          <div class="arrow"></div>
          <ul class="list-group">
            <li class="list-group-item">
              <span class="i pficon pficon-info"></span>
              Added Datasources TestDS
            </li>
            <li class="list-group-item">
              <span class="i pficon pficon-info"></span>
              Modified Datasources ExampleDS
            </li>
          </ul>
          <div class="footer"><a href="#">Clear Messages</a></div>
        </div>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-primary">
      <li>
        <a href="#">First Link</a>
      </li>
    </ul>
  </div>
</nav>

      <div class="dropdown  dropdown-kebab-pf">
        <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebab" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          <span class="fa fa-ellipsis-v"></span>
        </button>
        <ul class="dropdown-menu " aria-labelledby="dropdownKebab">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>
      

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

<button class="btn btn-default" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          <span class="pficon pficon-close"></span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
          <div class="form-group">
            <label class="col-sm-3 control-label" for="textInput-modal-markup">Field One</label>
            <div class="col-sm-9">
              <input type="text" id="textInput-modal-markup" class="form-control"></div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label" for="textInput2-modal-markup">Field Two</label>
            <div class="col-sm-9">
              <input type="text" id="textInput2-modal-markup" class="form-control"></div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label" for="textInput3-modal-markup">Field Three</label>
            <div class="col-sm-9">
              <input type="text" id="textInput3-modal-markup" class="form-control">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

<ul class="pagination">
  <li>
    <a href="#">
      <span class="i fa fa-angle-left"></span>
    </a>
  </li>
  <li>
    <a href="#">1</a>
  </li>
  <li>
    <a href="#">2</a>
  </li>
  <li>
    <a href="#">3</a>
  </li>
  <li>
    <a href="#">4</a>
  </li>
  <li>
    <a href="#">5</a>
  </li>
  <li>
    <a href="#">
      <span class="i fa fa-angle-right"></span>
    </a>
  </li>
</ul>

<ul class="pager">
  <li class="previous">
    <a href="#">
      <span class="i fa fa-angle-left"></span>
      Previous
    </a>
  </li>
  <li class="next">
    <a href="#">
      Next
      <span class="i fa fa-angle-right"></span>
    </a>
  </li>
</ul>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div>
  <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="1 http smartproxy 1 http http http" data-content="This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true">Click to toggle popover 1</a>
</div>
<div style="margin-top: 20px;">
  <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Close icon with no Title text. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true">Click to toggle popover 2</a>
</div>
<div style="margin: 20px 0;">
  <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="3 popover example" data-content="Popover with no Close icon.
    This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy.">Click to toggle popover 3
  </a>
</div>
<div style="margin: 20px 0;">
  <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Empty Title example.
    This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy.">Click to toggle popover 4
  </a>
</div>
<script>
  // Initialize Popovers
  $(document).ready(function() {
    $('[data-toggle=popover]').popovers()
      .on('hidden.bs.popover', function (e) {
        $(e.target).data('bs.popover').inState.click = false;
      });
  });
</script>

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% complete</span>
  </div>
</div>

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
    <span>50%</span>
  </div>
</div>

<div class="progress progress-label-left">
  <div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
    <span>5%</span>
  </div>
</div>

<div class="progress-description">
  <div class="spinner spinner-xs spinner-inline"></div> <strong>Downloading:</strong>  Product Repositories
</div>
<div class="progress progress-label-top-right">
  <div class="progress-bar" role="progressbar" aria-valuenow="42.7" aria-valuemin="0" aria-valuemax="100" style="width: 42.7%;">
    <span>42.7% (35 of 82MB)</span>
  </div>
</div>

<form role="form" class="search-pf has-button">
  <div class="form-group has-clear">
    <div class="search-pf-input-group">
      <label for="search1" class="sr-only">Search</label>
      <input id="search1" type="search" class="form-control" placeholder="Search">
      <button type="button" class="clear" aria-hidden="true"><span class="pficon pficon-close"></span></button>
    </div>
  </div>
  <div class="form-group">
    <button class="btn btn-default" type="button"><span class="fa fa-search"></span></button>
  </div>
</form>
<script>
  (function($) {
    $(document).ready(function() {
      // Hide the clear button if the search input is empty
      $(".search-pf .has-clear .clear").each(function() {
        if (!$(this).prev('.form-control').val()) {
          $(this).hide();
        }
      });
      // Show the clear button upon entering text in the search input
      $(".search-pf .has-clear .form-control").keyup(function () {
        var t = $(this);
        t.next('button').toggle(Boolean(t.val()));
      });
      // Upon clicking the clear button, empty the entered text and hide the clear button
      $(".search-pf .has-clear .clear").click(function () {
        $(this).prev('.form-control').val('').focus();
        $(this).hide();
      });
    });
  })(jQuery);
</script>

<div class="spinner"></div>

<div class="spinner spinner-lg"></div>

<div class="spinner spinner-sm"></div>

<div class="spinner spinner-xs"></div>

<p><span class="spinner spinner-xs spinner-inline"></span> Along with some text</p>

<div class="spinner spinner-inverse"></div>

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

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

<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 class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Tab Five <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </li>
</ul>

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

<script src="/components/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js"></script>
<script src="/components/moment/min/moment.min.js"></script>
<div class="input-group time-picker-pf" id="time-picker-2">
  <input type="text" class="form-control"/>
  <span class="input-group-addon btn btn-default">
    <span class="fa fa-clock-o"></span>
  </span>
</div>
<script>
  $('#time-picker-2').datetimepicker({
    format: 'LT',
    keyBinds: {
      enter: function () {
        $('#time-picker-2').find('input').trigger('change');
        this.hide();
      }
    }
  });
  $('#time-picker-2').data('DateTimePicker').clear();
</script>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

<div class="table-responsive">
  <table class="table table-bordered table-hover table-treegrid">
    <thead>
    <tr>
      <th>Column heading</th>
      <th>Column heading</th>
      <th>Column heading</th>
      <th>Column heading</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td class="treegrid-node">
        <span class="icon node-icon fa fa-folder"></span>
        Parent 1
      </td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr data-parent="0">
      <td class="treegrid-node">
        <span class="icon node-icon fa fa-file-o"></span>
        Child 1
      </td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr data-parent="1">
      <td class="treegrid-node">
        <span class="icon node-icon fa fa-file-o"></span>
        Grandchild 1
      </td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr data-parent="1">
      <td class="treegrid-node">
        <span class="icon node-icon fa fa-file-o"></span>
        Grandchild 2
      </td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr data-parent="1">
      <td class="treegrid-node">
        <span class="icon node-icon fa fa-file-o"></span>
        Grandchild 3
      </td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr data-parent="0">
      <td class="treegrid-node">
        <span class="icon node-icon fa fa-file-o"></span>
        Child 2
      </td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <td class="treegrid-node">
        <span class="icon node-icon fa fa-folder"></span>
        Parent 2
      </td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr id="parent-3">
      <td class="treegrid-node">
        <span class="icon node-icon fa fa-folder"></span>
        Parent 3
      </td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr data-parent="#parent-3">
      <td class="treegrid-node">
        <span class="icon node-icon fa fa-file-o"></span>
        Child 3
      </td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr id="parent-4" class="collapsed">
      <td class="treegrid-node">
        <span class="icon node-icon fa fa-folder"></span>
        Parent 4
      </td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr data-parent="#parent-4" id="child-4">
      <td class="treegrid-node">
        <span class="icon node-icon fa fa-file-o"></span>
        Child 4
      </td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr data-parent="#child-4">
      <td class="treegrid-node">
        <span class="icon node-icon fa fa-file-o"></span>
        Grandchild 4
      </td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    </tbody>
  </table>
</div>
<script>
  $('.table-treegrid').treegrid();
</script>