Form Elements header small text goes here...

<!-- email -->
<input type="email" class="form-control" placeholder="Enter email" />

<!-- select -->
<select class="form-control">...</select>

<!-- multiple select -->
<select multiple class="form-control">...</select>

<!-- textarea -->
<textarea class="form-control" rows="3"></textarea>

<!-- form-control-lg -->
<input class="form-control" type="text" placeholder="Readonly input here…" readonly />

<!-- readonly plaintext -->
<input type="text" readonly class="form-control-plaintext" value="email@example.com" />

<!-- password -->
<input type="password" readonly class="form-control" placeholder="Password" />

<!-- form-control-lg -->
<input class="form-control form-control-lg" type="text" />
<select class="form-control form-control-lg">...</select>

<!-- default -->
<input class="form-control" type="text" />
<select class="form-control">...</select>

<!-- form-control-sm -->
<input class="form-control form-control-sm" type="text" />
<select class="form-control form-control-sm">...</select>

<!-- valid -->
<div class="row form-group m-b-10">
  <label class="col-md-3 col-form-label">Valid Input</label>
  <div class="col-md-9">
    <input type="text" class="form-control is-valid" />
    <div class="valid-feedback">Looks good!</div>
    <div class="valid-tooltip">Looks good!</div>
  </div>
</div>

<!-- invalid -->
<div class="row form-group m-b-10">
  <label class="col-md-3 col-form-label">...</label>
  <div class="col-md-9">
    <input type="text" class="form-control is-invalid" />
    <div class="invalid-feedback">...</div>
    <div class="invalid-tooltip">...</div>
  </div>
</div>

<!-- default -->
<div class="checkbox checkbox-css">
  <input type="checkbox" id="cssCheckbox1" checked />
  <label for="cssCheckbox1">Checkbox</label>
</div>
<div class="radio radio-css">
  <input type="radio" id="cssRadio1" checked />
  <label for="cssRadio1">Radio</label>
</div>

<!-- inline -->
<div class="checkbox checkbox-css checkbox-inline">
  <input type="checkbox" id="inlineCssCheckbox1" checked />
  <label for="inlineCssCheckbox1">Inline Checkbox</label>
</div>
<div class="radio radio-css radio-inline">
  <input type="radio" id="inlineCssRadio1" />
  <label for="inlineCssRadio1">Inline Radio</label>
</div>

<!-- success state -->
<div class="checkbox checkbox-css is-valid">...</div>
<div class="checkbox checkbox-radio is-valid">...</div>

<!-- error state -->
<div class="checkbox checkbox-radio is-invalid">...</div>
<div class="checkbox checkbox-css is-invalid">...</div>

<!-- switcher -->
<div class="switcher">
  <input type="checkbox" name="switcher_checkbox_1" id="switcher_checkbox_1" checked="" value="1">
  <label for="switcher_checkbox_1"></label>
</div>

<!-- begin custom-checkbox -->
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
<!-- end custom-checkbox -->

<!-- begin custom-radio -->
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<!-- end custom-radio -->

<!-- begin custom-switches -->
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<!-- end custom-switches -->

<!-- default -->
<div class="form-check">
  <input type="checkbox" class="form-check-input" id="defaultCheckbox" />
  <label class="form-check-label" for="defaultCheckbox">...<label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" id="defaultRadio" checked />
  <label class="form-check-label" for="defaultRadio">...</label>
</div>

<!-- inline -->
<div class="form-check form-check-inline">
  ...
</div>

<!-- valid state -->
<div class="form-check">
  <input class="form-check-input is-valid" />
  <label class="form-check-label">...</label>
</div>

<!-- invalid state -->
<div class="form-check">
  <input class="form-check-input is-invalid" />
  <label class="form-check-label">...</label>
</div>

<div class="input-group">
  <span class="input-group-prepend">$</span>
  <input type="text" class="form-control" />
  <span class="input-group-append">.00</span>
</div>

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-append">
    <button type="button" class="btn btn-yellow" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <button type="button" class="btn btn-yellow dropdown-toggle no-caret">
      Action
    </button>
    <ul class="dropdown-menu dropdown-menu-right">
      ...
    </ul>
  </div>
</div>

<!-- input-group-lg -->
<div class="input-group input-group-lg">...</div>

<!-- default -->
<div class="input-group">...</div>

<!-- input-group-sm -->
<div class="input-group input-group-sm">...</div>

<div class="form-group">
  <label>...</label>
  <input type="text" class="form-control" />
</div>

<div class="form-group row m-b-15">
  <label class="col-md-3 col-form-label">...</label>
  <div class="col-md-7">
    <input type="text" class="form-control" placeholder="" />
  </div>
</div>