Bootstrap 4 Form controls

In Bootstrap there are the predefined classes to style the HTML form elements. Form elements like <input>, <select>, and <textarea> — are styled with the .form-control class.

Bootstrap Form: text box

<form>
   <div class="form-group">
      <label for="name">Username: </label>
      <input type="text" class="form-control" id="name" placeholder="username">
   </div>
</form>

Bootstrap Form: password

<div class="form-group">
   <label for="password">Password: </label>
   <input type="password" class="form-control" id="password" placeholder="Password">
</div>

Bootstrap Form: Select Box

<div class="form-group">
   <label for="select1">Select Box: </label>
   <select class="form-control" id="select1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option> 
   </select>
</div>
<div class="form-group">
   <label for="select2">Multiple Select Box: </label>
   <select multiple class="form-control" id="select2">
     <option>1</option>
     <option>2</option>
     <option>3</option>
     <option>4</option>
     <option>5</option>
    </select>
</div>

Bootstrap Form: textarea

<div class="form-group">
    <label for="Textarea1">Example textarea</label>
    <textarea class="form-control" id="Textarea1" rows="3"></textarea>
</div>

Bootstrap Form: file upload

<div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>

Bootstrap form control - Sizing

Set heights using classes like .form-control-lg and .form-control-sm.

<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 Box: Sizing

<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>

Readonly plain text

If you want to have input element as readonly elements in your form as plain text, use the .form-control-plaintext class

Example 1: Bootstrap form with email as readonly plain text.

<form>
  <div class="form-group row">
    <label for="email" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="email" value="email@example.com">
    </div>
  </div>
  <div class="form-group row">
    <label for="password" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="password" placeholder="Password">
    </div>
  </div>
</form>

Example 2: Bootstrap inline form with email as readonly plain text.

<form class="form-inline">
  <div class="form-group mb-2">
    <label for="email2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="email2" value="email@example.com">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="password3" class="sr-only">Password</label>
    <input type="password" class="form-control" id="password3" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Bootstrap Range Inputs

Set horizontally scrollable range inputs using .form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

Checkboxes and radios

Default checkboxes and radios are improved upon with the help of .form-check. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

<form>
   <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="check1">
      <label class="form-check-label" for="check1">Checkbox 1</label>
   </div>
   <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="check2">
      <label class="form-check-label" for="check2">Checkbox 2</label>
   </div>
</form>

<form>
   <div class="form-check">
      <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
      <label class="form-check-label" for="exampleRadios1">Radio Option 1</label>
   </div>
   <div class="form-check">
      <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
      <label class="form-check-label" for="exampleRadios2">Radio Option 2</label>
   </div>
   <div class="form-check">
      <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
      <label class="form-check-label" for="exampleRadios3">Radio Option 3</label>
   </div>
</form>

Checkboxes and radios inline

Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.

<form>
   <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
      <label class="form-check-label" for="inlineCheckbox1">Checkbox 1</label>
   </div>
   <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
      <label class="form-check-label" for="inlineCheckbox2">Checkbox 2</label>
   </div>
   <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
      <label class="form-check-label" for="inlineCheckbox3">Checkbox 3</label>
   </div>
</form>

Form row

You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    <div>
  </div>
</form>

Example: More complex layouts can also be created with the grid system.

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

Horizontal form

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="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" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">First radio</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">Second radio</label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" 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" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">Example checkbox</label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

Horizontal form label sizing

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

Column sizing

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

Help text

Block-level help text in forms can be created using .form-text. Inline help text can be flexibly implemented using any inline HTML element and utility classes like .text-muted.

Example: Password field with help text

<form>
  <label for="inputPassword5">Password</label>
  <input type="password" id="inputPassword5" class="form-control">
  <small id="passwordHelpBlock" class="form-text text-muted">
    Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters.
  </small>
</form>

Example: Password field with inline help text

<form>
  <div class="form-group">
    <label for="inputPassword6" style="display:inline-block;">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>