patternfly/tests/pages/_includes/widgets/layouts/toolbar.html

This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.

      <div class="container-fluid">
        <div class="row toolbar-pf">
          <div class="col-sm-12">
            <form class="toolbar-pf-actions">
              <div class="form-group toolbar-pf-filter">
                <label class="sr-only" for="filter">Name</label>
                <div class="input-group">
                  <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                      <li class="selected"><a href="#">Name</a></li>
                      <li><a href="#">Type</a></li>
                      <li><a href="#">Color</a></li>
                    </ul>
                  </div><!-- /btn-group -->
                  <input type="text" class="form-control" id="filter" placeholder="Filter By Name...">
                </div><!-- /input-group -->
              </div>
              <div class="form-group">
                <div class="dropdown btn-group">
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li class="selected"><a href="#">Name</a></li>
                    <li><a href="#">Type</a></li>
                    <li><a href="#">Last Modified</a></li>
                  </ul>
                </div>
                <button class="btn btn-link" type="button">
                  <span class="fa fa-sort-alpha-asc"></span>
                </button>
              </div>
              <div class="form-group">
                <button class="btn btn-default" type="button">Action</button>
                <button class="btn btn-default" type="button">Action</button>
                {% include widgets/kebab.html dropmenuType="dropdown btn-group" dropmenuId="dropdownKebab" dropmenuVariation="dropdown-kebab-pf" %}
              </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 class="form-group toolbar-pf-view-selector">
                  <button class="btn btn-link {% if page.tableview %}active{% endif %}"><i class="fa fa-th"></i></button>
                  <button class="btn btn-link {% if page.cardview %}active{% endif %}"><i class="fa fa-th-large"></i></button>
                  <button class="btn btn-link {% if page.listview %}active{% endif %}"><i class="fa fa-th-list"></i></button>
                </div>
              </div>
            </form>
            <div class="row toolbar-pf-results">
              <div class="col-sm-12">
                <h5>40 Results</h5>
                <p>Active filters:</p>
                <ul class="list-inline">
                  <li>
                    <span class="label label-info">
                      Name: nameofthething
                      <a href="#"><span class="pficon pficon-close"></span></a>
                    </span>
                  </li>
                  <li>
                    <span class="label label-info">
                      Name: nameofthething
                      <a href="#"><span class="pficon pficon-close"></span></a>
                    </span>
                  </li>
                  <li>
                    <span class="label label-info">
                      Name: nameofthething
                      <a href="#"><span class="pficon pficon-close"></span></a>
                    </span>
                  </li>
                </ul>
                <p><a href="#">Clear All Filters</a></p>
              </div><!-- /col -->
            </div><!-- /row -->
          </div><!-- /col -->
        </div><!-- /row -->
      </div><!-- /container -->