Forms

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

Bootstrap documentation


We'll never share your email with anyone else.
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input class="form-control" id="exampleInputEmail1" type="email" aria-describedby="emailHelp">
    <small class="form-text text-muted" id="emailHelp">We&apos;ll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input class="form-control" id="exampleInputPassword1" type="password">
  </div>
  <div class="form-group form-check">
    <input class="form-check-input" id="exampleCheck1" type="checkbox">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

Form controls

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input class="form-control" id="exampleFormControlInput1" type="email" placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select class="form-control" id="exampleFormControlSelect2" multiple="">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Sizing

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Default checkboxes & radios

<div class="form-check">
  <input class="form-check-input" id="defaultCheck1" type="checkbox" value="">
  <label class="form-check-label" for="defaultCheck1">Default checkbox</label>
</div>
<div class="form-check">
  <input class="form-check-input" id="defaultCheck2" type="checkbox" value="" disabled="">
  <label class="form-check-label" for="defaultCheck2">Disabled checkbox</label>
</div>
<div class="form-check">
  <input class="form-check-input" id="exampleRadios1" type="radio" name="exampleRadios" value="option1" checked="">
  <label class="form-check-label" for="exampleRadios1">Default radio</label>
</div>
<div class="form-check">
  <input class="form-check-input" id="exampleRadios2" type="radio" name="exampleRadios" value="option2">
  <label class="form-check-label" for="exampleRadios2">Second default radio</label>
</div>
<div class="form-check">
  <input class="form-check-input" id="exampleRadios3" type="radio" name="exampleRadios" value="option3" disabled="">
  <label class="form-check-label" for="exampleRadios3">Disabled radio</label>
</div>

Form row

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input class="form-control" id="inputEmail4" type="email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input class="form-control" id="inputPassword4" type="password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input class="form-control" id="inputAddress" type="text" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input class="form-control" id="inputAddress2" type="text" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input class="form-control" id="inputCity" type="text">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select class="form-control" id="inputState">
        <option selected="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input class="form-control" id="inputZip" type="text">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" id="gridCheck" type="checkbox">
      <label class="form-check-label" for="gridCheck">Check me out</label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Sign in</button>
</form>

Horizontal form

Radios
Checkbox
<form>
  <div class="form-group row">
    <label class="col-sm-2 col-form-label" for="inputEmail3">Email</label>
    <div class="col-sm-10">
      <input class="form-control" id="inputEmail3" type="email">
    </div>
  </div>
  <div class="form-group row">
    <label class="col-sm-2 col-form-label" for="inputPassword3">Password</label>
    <div class="col-sm-10">
      <input class="form-control" id="inputPassword3" type="password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" id="gridRadios1" type="radio" name="gridRadios" value="option1" checked="">
          <label class="form-check-label" for="gridRadios1">First radio</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" id="gridRadios2" type="radio" name="gridRadios" value="option2">
          <label class="form-check-label" for="gridRadios2">Second radio</label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" id="gridRadios3" type="radio" name="gridRadios" value="option3" disabled="">
          <label class="form-check-label" for="gridRadios3">Third disabled radio</label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" id="gridCheck1" type="checkbox">
        <label class="form-check-label" for="gridCheck1">Example checkbox</label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button class="btn btn-primary" type="submit">Sign in</button>
    </div>
  </div>
</form>