Purchase Now

Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Default

We'll never share your email with anyone else. 
<div class="form-group">
  <label for="exampleInputEmail1">Email address</label>
  <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
  <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>

Sizing 

<div class="form-group">
  <label for="exampleInputEmail1">Small</label>
  <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
</div>
<div class="form-group">
  <label for="exampleInputEmail1">Regular</label>
  <input class="form-control form-control" type="text" placeholder=".form-control">
</div>
<div class="form-group">
  <label for="exampleInputEmail1">Large</label>
  <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
</div>
<div class="form-group">
  <label for="exampleInputEmail1">Small</label>
  <select class="form-control form-control-sm">
    <option>Small select</option>
  </select>
</div>
<div class="form-group">
  <label for="exampleInputEmail1">Regular</label>
  <select class="form-control">
    <option>Default select</option>
  </select>
</div>
<div class="form-group">
  <label for="exampleInputEmail1">Large</label>
  <select class="form-control form-control-lg">
    <option>Large select</option>
  </select>
</div>

Input Groups 

<div class="form-group">
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon1"><i class="icon-search2"></i></span>
    </div>
    <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
  </div>
</div>
<div class="form-group">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
    <div class="input-group-append">
      <span class="input-group-text" id="basic-addon2"><i class="icon-calendar2"></i></span>
    </div>
  </div>
</div>

Bootstrap Select 

<div class="form-group">
  <select class="selectpicker form-control" data-live-search="true" data-style="btn-default">
    <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
    <option data-tokens="mustard">Burger, Shake and a Smile</option>
    <option data-tokens="frosting">Sugar, Spice and all things nice</option>
  </select>
</div>
<div class="form-group">
  <select class="selectpicker form-control" data-style="btn-default">
    <optgroup label="Picnic">
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
    </optgroup>
    <optgroup label="Camping">
      <option>Tent</option>
      <option>Flashlight</option>
      <option>Toilet Paper</option>
    </optgroup>
  </select>
</div>

Checkboxes

<div class="custom-control custom-checkbox mb-2">
    <input type="checkbox" class="custom-control-input" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">Unchecked</label>
</div>
<div class="custom-control custom-checkbox mb-2">
    <input type="checkbox" class="custom-control-input" id="customCheck2" checked="">
    <label class="custom-control-label" for="customCheck2">Checked</label>
</div>
<div class="custom-control custom-checkbox mb-2">
    <input type="checkbox" class="custom-control-input" id="customCheck3" disabled="">
    <label class="custom-control-label" for="customCheck3">Disabled unchecked</label>
</div>
<div class="custom-control custom-checkbox mb-2">
    <input type="checkbox" class="custom-control-input" id="customCheck4" checked="" disabled="">
    <label class="custom-control-label" for="customCheck4">Disabled checked</label>
</div>
<div class="custom-control custom-radio mb-2">
    <input type="radio" name="custom-radio-1" class="custom-control-input" id="customRadio1">
    <label class="custom-control-label" for="customRadio1">Unchecked</label>
</div>
<div class="custom-control custom-radio mb-2">
    <input type="radio" name="custom-radio-1"  class="custom-control-input" id="customRadio2" checked="">
    <label class="custom-control-label" for="customRadio2">Checked</label>
</div>
<div class="custom-control custom-radio mb-2">
    <input type="radio" name="custom-radio-1"  class="custom-control-input" id="customRadio3" disabled="">
    <label class="custom-control-label" for="customRadio3">Disabled unchecked</label>
</div>
<div class="custom-control custom-radio mb-2">
    <input type="radio" name="custom-radio-1"  class="custom-control-input" id="customRadio4" checked="" disabled="">
    <label class="custom-control-label" for="customRadio4">Disabled checkbox</label>
</div>