Widgets

Overview

Widgets are reusable controls and elements — building blocks for your UI. Widgets are often used together as elements of larger Design Patterns.

A note on code dependencies: Most PatternFly widgets are customized versions of Bootstrap Components. PatternFly depends on Bootstrap’s CSS, but not Bootstrap’s JavaScript, in order to keep the Bootstrap JavaScript modular. PatternFly also uses C3.js for chart components, and DataTables.net for table-based components.

Accordion (Collapse)

See http://getbootstrap.com/javascript/#collapse for complete accordion documentation.

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

Alerts

See http://getbootstrap.com/components/#alerts for complete alerts documentation.

Hey there is a problem! Yeah this is really messed up and you should know about it.
There might be a problem here! We are not really sure, but it might be bad.
Great job! This is really working out great for us.
This is some general information. You should know about this.
Hey there is a problem! Yeah this is really messed up and you should know about it.

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

Badges

See http://getbootstrap.com/components/#badges for complete badges documentation.

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

Bootstrap Combobox

See https://github.com/patternfly/patternfly-bootstrap-combobox for complete Bootstrap Combobox documentation.

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

Bootstrap Datepicker

See http://bootstrap-datepicker.readthedocs.org/en/latest/ for complete Bootstrap Datepicker documentation.

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

Bootstrap Select

See http://silviomoreto.github.io/bootstrap-select/ for complete Bootstrap Select documentation.

Single-Select

Multiple Select

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

Bootstrap Switch

See http://www.bootstrap-switch.org/ for complete Bootstrap Switch documentation.

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

Bootstrap Touchspin

See http://www.virtuosoft.eu/code/bootstrap-touchspin/ for complete Bootstrap Touchspin documentation.

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

Bootstrap Tree View

See https://github.com/patternfly/patternfly-bootstrap-treeview for complete Bootstrap Tree View documentation.

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

Buttons

See http://getbootstrap.com/css/#buttons for complete buttons documentation.

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

Button Groups

See http://getbootstrap.com/components/#btn-groups for complete button groups documentation.

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

Count Remaining Characters

Note: By default blockInputAtMaxLimit is false, meaning that after reaching the maximum number of characters specified, the user can still enter additional characters; the remaining character count will turn negative. When blockInputAtMaxLimit is true, the user will be blocked from entering more characters after reaching the maximum character limit. The remaining character count will stop at 0. When blockInputAtMaxLimit is true, Right-Click 'paste' will only paste characters until the maximum character limit is reached.

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

Data Tables

See http://datatables.net for complete data tables documentation.

Note: jquery.dataTables.js must occur in the html source before patternfly*.js.

1 of 3
0 of 0 selected
Rendering Engine Browser Platform(s) Engine Version CSS Grade Actions
per page
1-15 of 75
of 5

<!-- 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="#">on 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> <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>

Fixed Height Accordion (Collapse)

Same markup as Accordion but in a fixed height container. The content of the collapse areas scroll rather than expanding the outer accordion container.

Note: Setting the collapse areas to scroll rather than expand requires patternfly.min.js, initialization via initCollapseHeights()

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

Forms

See http://getbootstrap.com/css/#forms for complete forms documentation.

Horizontal Form

Please correct the error

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

Google Code Prettify

See https://code.google.com/p/google-code-prettify/wiki/GettingStarted for complete Google Code Prettify documentation.

<p class="my-class">Sample text here...</p>

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

Info Tip

Note: Info Tip uses Dropdowns.

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

Kebabs

Kebabs are a restyled version of a dropdown and support the same feature set. See http://getbootstrap.com/components/#dropdowns for complete dropdowns documentation.

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

Labels

See http://getbootstrap.com/components/#labels for complete labels documentation.

Default Primary Success Info Warning Danger

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

List Group

See http://getbootstrap.com/components/#list-group for complete list group documentation.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

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

Panels

See http://getbootstrap.com/components/#panels for complete panels documentation.

Panel title

Panel content

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

Popover

See http://getbootstrap.com/javascript/#popovers for complete popover documentation.

Note: Displaying the close (X) icon in popovers requires patternfly.min.js, initialization via popovers() (note the "s"), and adding data attribute data-close="true" to the trigger element.

<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()
  });
</script>

Progress Bars

See http://getbootstrap.com/components/#progress for complete progress bar documentation.

Basic

60% complete

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

With Label

50%

<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>
Label on Left
5%

<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>
Label on Top Left and Top Right
Downloading: Product Repositories
42.7% (35 of 82MB)

<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>
46,512 Downloading: Product Repositories
100%

<div class="progress-description">
  <span class="count">46,512</span> <strong>Downloading:</strong>  Product Repositories
</div>
<div class="progress progress-label-top-right">
  <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
    <span>100%</span>
  </div>
</div>
Network Activity: 10.10.121.02
100%

<div class="progress-description">
  <span class="pficon pficon-ok"></span> <strong>Network Activity:</strong>  10.10.121.02
</div>
<div class="progress progress-label-top-right">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
    <span>100%</span>
  </div>
</div>

Additional Sizes

Small
60% complete

<div class="progress progress-sm">
  <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>
Extra Small

Note: Extra small does not support labels.

60% complete

<div class="progress progress-xs">
  <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>

Spinner

Note: IE9 requires a conditional class on <html> in order to display an animated gif fallback as it doesn't support CSS animation. See lines 2-5 of https://rawgit.com/patternfly/patternfly/master-dist/dist/tests/spinner.html.

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

Additional Sizes

Large

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

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

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

Inline

Along with some text

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

Inverse (on a dark background)

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

Tables

See http://getbootstrap.com/css/#tables for complete tables documentation.

Note: all tables in PatternFly are condensed.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

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

Tabs

See http://getbootstrap.com/components/#nav-tabs for complete tabs documentation.

Single Level

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

Single Level with Dropdown

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

Single Level with Persistent Secondary Level

Note: the markup semantics used here 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>
</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>

Tooltip

See http://getbootstrap.com/javascript/#tooltips for complete tooltip documentation.

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

TreeGrid Table

Column heading Column heading Column heading Column heading
Parent 1 Column content Column content Column content
Child 1 Column content Column content Column content
Grandchild 1 Column content Column content Column content
Grandchild 2 Column content Column content Column content
Grandchild 3 Column content Column content Column content
Child 2 Column content Column content Column content
Parent 2 Column content Column content Column content
Parent 3 Column content Column content Column content
Child 3 Column content Column content Column content
Child 4 Column content Column content Column content
Grandchild 4 Column content Column content Column content

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