5 Input groups

5.1 Basic example

@

@example.com

$ .00

https://example.com/users/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<br>
<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<br>
<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>
<br>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

5.2 Seach Form

<form id="demo-2">
 <input type="search" class="form-control form-search">
</form>

5.3 Seach Form with dropdown

<form class="dropdown-form js-dropdown-form">
  <div class="input-group">
    <input type="search" class="form-control dropdown-form-search js-form-search" placeholder="Search (e.g.: product reference, customer name…)">
    <div class="input-group-addon">
      <div class="dropdown">
        <span class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
         Everywhere
        </span>
        <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
       </div>
     </div>
     <div class="input-group-addon search-bar"><button type="submit">SEARCH<i class="material-icons">search</i></button></div>
   </div>
</form>