4 Forms

4.1 Inputs (width build on grid)

Remember, since Bootstrap utilizes the HTML5 doctype, all inputs must have a type attribute.

<fieldset class="form-group">
<label class="form-control-label" for="exampleInput1">Input</label>
 <input type="text" class="form-control" ></input>
</fieldset>
<fieldset class="form-group">
<label class="form-control-label" for="exampleInput2">Input - Placeholder</label>
 <input type="text" class="form-control" placeholder="Wake me up!"></input>
</fieldset>
<fieldset class="form-group">
<label class="form-control-label" for="exampleInput3">Input - edit</label>
 <input type="text" class="form-control edit"></input>
</fieldset>

4.2 Form validation states

success
Success
warning
Warning
danger
Error
<div class="form-group has-">
 <label class="form-control-label" for="input">Input </label>
 <input type="text" class="form-control form-control-" id="input">
</div>

4.3 Select (Bootstrap)

<select class="c-select ">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

4.4 Dropdown

<div class="row">
<div class="col-md-6">
<select data-toggle="select2">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
</div>
</div>

4.5 Autocomplete search with items selected

<div class="autocomplete-search">
  <input type="text" class="form-control search" placeholder="Search and add a related product" autocomplete="off">
  <ul class="product-list">
    <li class="card">
      <img class="image" src="./img/autocomplete-seach.png">
      <span class="label">Faded Short Sleeves T-shirt (ref: demo_1)</span>
      <i class="material-icons delete">clear</i>
    </li>
  </ul>
</div>