Skip to main content

Search

Purpose

Users need to search for data.

Basic

Example HTML usage: 
<!-- Basic search with icon button -->
<div class="input-group mb-4">
  <input type="text" class="form-control" placeholder="Search this blog" />
  <div class="input-group-append">
    <button class="btn btn-primary md-icon" type="button">
      <i class="material-icons">search</i>
    </button>
  </div>
</div>
<!-- Basic search with text button -->
<div class="input-group">
  <input type="text" class="form-control" placeholder="Search this blog" />
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">Search</button>
  </div>
</div>

With advance

Show advanced search
Example HTML usage: 
<!-- Advance search -->
<div class="input-group">
  <input type="text" class="form-control" placeholder="Search this blog" />

  <div class="input-group-append">
    <button class="btn btn-primary md-icon" type="button">
      <i class="material-icons">search</i>
    </button>
  </div>
</div>
<div class="help-block">
  <small><a href="#">Show advanced search</a></small>
</div>

Sizing

Add .input-group-sm and .input-group-lg to the .input-group to chang the size.

Example HTML usage: 
<!-- Size -->
<p>
  Add <code class="highlighter-rouge">.input-group-sm</code> and
  <code class="highlighter-rouge">.input-group-lg</code> to the
  <code class="highlighter-rouge">.input-group</code> to chang the size.
</p>

<!-- Basic search with small button -->
<div class="input-group input-group-sm mb-3">
  <input type="text" class="form-control" placeholder="Search this blog" />
  <div class="input-group-append">
    <button class="btn btn-primary md-icon" type="button">
      <i class="material-icons">search</i>
    </button>
  </div>
</div>
<div class="input-group input-group-lg">
  <input type="text" class="form-control" placeholder="Search this blog" />
  <div class="input-group-append">
    <button class="btn btn-primary md-icon" type="button">
      <i class="material-icons md-lg">search</i>
    </button>
  </div>
</div>

Scoped

Patents Trademark Application
Patents Trademark Application
Patents Trademark Application
Patents Trademark Application
Example HTML usage: 
<!-- Scoped search -->
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button
      class="btn btn-primary dropdown-toggle"
      type="button"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false"
    >
      Patents
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Patents</a>
      <a class="dropdown-item" href="#">Trademark</a>
      <a class="dropdown-item" href="#">Application</a>
    </div>
  </div>
  <input
    type="text"
    class="form-control"
    aria-label="Text input with dropdown button"
  />
</div>

<div class="input-group mb-3">
  <input
    type="text"
    class="form-control"
    aria-label="Text input with dropdown button"
  />
  <div class="input-group-append">
    <button
      class="btn btn-primary dropdown-toggle"
      type="button"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false"
    >
      Patents
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Patents</a>
      <a class="dropdown-item" href="#">Trademark</a>
      <a class="dropdown-item" href="#">Application</a>
    </div>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-primary">Patents</button>
    <button
      type="button"
      class="btn btn-primary dropdown-toggle dropdown-toggle-split"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false"
    >
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Patents</a>
      <a class="dropdown-item" href="#">Trademark</a>
      <a class="dropdown-item" href="#">Application</a>
    </div>
  </div>
  <input
    type="text"
    class="form-control"
    aria-label="Text input with segmented dropdown button"
  />
</div>

<div class="input-group mb-3">
  <input
    type="text"
    class="form-control"
    aria-label="Text input with segmented dropdown button"
  />
  <div class="input-group-append">
    <button type="button" class="btn btn-primary">Patents</button>
    <button
      type="button"
      class="btn btn-primary dropdown-toggle dropdown-toggle-split"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false"
    >
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Patents</a>
      <a class="dropdown-item" href="#">Trademark</a>
      <a class="dropdown-item" href="#">Application</a>
    </div>
  </div>
</div>