Search bar

Easily create a nicely looking search. The Search component consists of a search div and the search input itself.

<div class="form-search-container">
    <input type="search" id="input" class="form-control form-search" autocomplete="off" placeholder="Search...">
    <span class="icon icon-search icon-2x align-bottom"></span>
  </div>

With only button

<div class="flex-sm flex-sm-middle">
    <div class="form-search-container">
      <input type="search" id="input" class="form-control form-search" autocomplete="off" placeholder="Search...">
      <span class="icon icon-search icon-2x align-bottom"></span>
    </div>
    <div class="flex-sm pt-2 pt-sm-0">
      <div class="ml-2">
        <button class="btn btn-primary btn-block"><span class="icon icon-add mr-1"></span>Add</button>
      </div>
    </div>
  </div>

With buttons

<div class="flex-sm flex-sm-middle">
    <div class="form-search-container">
      <input type="search" id="input" class="form-control form-search" autocomplete="off" placeholder="Search...">
      <span class="icon icon-search icon-2x align-bottom"></span>
    </div>
    <div class="flex-sm pt-2 pt-sm-0">
      <div class="ml-sm-2 mb-2 mb-sm-0">
        <button class="btn btn-secondary btn-block"><span class="icon icon-text-undo mr-1"></span>Refresh</button>
      </div>
      <div class="ml-sm-2">
        <button class="btn btn-primary btn-block"><span class="icon icon-add mr-1"></span>Add</button>
      </div>
    </div>
  </div>