Forms

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

Overview

Bootstrap's form controls expand on Bootstrap Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.

Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

For more information, see Bootstrap Forms

Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for documentation on required classes, form layout, and more.

We'll never share your email with anyone else. 
<form>
  <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>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
Copy

Form controls

Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

Be sure to explore our custom forms to further style <select>s.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" 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 multiple class="form-control" id="exampleFormControlSelect2">
      <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>
Copy

For file inputs, swap the .form-control for .form-control-file.

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

Custom range input

<input type="range" class="custom-range">
Copy

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">
Copy
<select class="custom-select custom-select-lg">
  <option>Large select</option>
</select>
<select class="custom-select">
  <option>Default select</option>
</select>
<select class="custom-select custom-select-sm">
  <option>Small select</option>
</select>
Copy

Disabled fields

Use disabled attribute for .form-controls

<!-- Input -->
<input type="text" class="form-control" placeholder="Disabled" disabled="">
<!-- End Input -->

<!-- Custom File Input -->
<div class="custom-file">
  <input type="file" id="customFile" class="custom-file-input" disabled="">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>
<!-- End Custom File Input -->

<!-- Textarea Field -->
<textarea class="form-control" placeholder="Textarea field" rows="4" disabled=""></textarea>
<!-- End Textarea Field -->

<!-- Select -->
<select class="custom-select" disabled="">
  <option>Choose an option</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
<!-- End Select -->

<!-- Range Input -->
<input type="range" class="custom-range" disabled="">
<!-- End Range Input -->
Copy

Input Group

Use .input-group-prepend and .input-group-append into .input-group

@
@example.com
https://example.com/users/
With textarea 
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group mb-3">
  <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">@example.com</span>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
  </div>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">With textarea</span>
  </div>
  <textarea class="form-control" aria-label="With textarea"></textarea>
</div>
Copy

Addons 

<div class="input-group mb-3">
   <div class="input-group-prepend">
     <button class="btn btn-primary" type="button" id="button-addon1">Button </button>
   </div>
   <input type="text" class="form-control" placeholder=""
         aria-label="Example text with button addon" aria-describedby="button-addon1">
 </div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <select class="custom-select">
      <option value="1" selected="">All</option>
      <option value="2">HTML</option>
      <option value="3">CSS</option>
      <option value="4">JS</option>
      <option value="5">PHP</option>
      <option value="6">Vue.js</option>
      <option value="7">React</option>
      <option value="8">Angular</option>
      <option value="9">Ruby</option>
      <option value="10">Python</option>
    </select>
  </div>

  <input type="text" class="form-control">

  <div class="input-group-append">
    <a href="#" class="btn btn-primary d-flex align-items-center">
      <i class="nova-search"></i>
    </a>
  </div>
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button" id="button-addon2">Button</button>
  </div>
</div>
Copy
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="bsCustomCheck1">
        <label class="custom-control-label" for="bsCustomCheck1"></label>
      </div>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with radio button">
</div>

<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <div class="custom-control custom-radio">
        <input type="checkbox" class="custom-control-input" id="bsCustomRadio1">
        <label class="custom-control-label" for="bsCustomRadio1"></label>
      </div>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with radio button">
</div>
Copy
First and last name
$ 0.00
$ 0.00 
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">First and last name</span>
  </div>
  <input type="text" aria-label="First name" class="form-control">
  <input type="text" aria-label="Last name" class="form-control">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
  <div class="input-group-append">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
</div>
Copy

Select with addons 

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <label class="input-group-text" for="inputGroupSelect01">Options</label>
  </div>
  <select class="custom-select" id="inputGroupSelect01">
    <option selected="">Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<div class="input-group mb-3">
  <select class="custom-select" id="inputGroupSelect02">
    <option selected="">Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <div class="input-group-append">
    <label class="input-group-text" for="inputGroupSelect02">Options</label>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-primary" type="button">Button</button>
  </div>
  <select class="custom-select" id="inputGroupSelect03" aria-label="Example select with button addon">
    <option selected="">Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<div class="input-group">
  <select class="custom-select" id="inputGroupSelect04" aria-label="Example select with button addon">
    <option selected="">Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">Button</button>
  </div>
</div>
Copy

Merge styles

Use .input-group-merge with .input-group-prepend-merge and .input-group-append-merge for icons and image-icons

Bitcoin Cash 
<div class="input-group input-group-merge">
  <div class="input-group-prepend-merge">
    <img class="icon-img" src="../../assets/svg/crypto/bitcoin-cash.svg" alt="Bitcoin Cash">
  </div>

  <input class="form-control form-control-prepend-img" placeholder="Placeholder" type="text">
</div>
Copy
<div class="input-group input-group-merge">
  <input class="form-control form-control-append-icon" placeholder="Search" type="text">

  <div class="input-group-append-merge">
    <i class="nova-search icon-text icon-text-sm"></i>
  </div>
</div>
Copy
<div class="input-group">
  <input type="text" class="form-control form-control-onfocus-inherit bg-transparent small text-muted" value="0xe99356bde974bbe08721d77712168fa070aa8da4" readonly="">

  <div class="input-group-append">
    <a class="input-group-text bg-transparent text-muted" href="#">
      <i class="nova-layers icon-text icon-text-sm"></i>
    </a>
  </div>
</div>
Copy

Use additional .input-group-merge .input-group-merge-btn with .input-group

<div class="input-group input-group-merge input-group-merge-btn">
  <input class="form-control" placeholder="https://themes.getbootstrap.com/store/htmlstream/" type="text">
  <div class="input-group-merge-append">
    <a class="btn btn-primary" href="#">Search</a>
  </div>
</div>
Copy

Input group sizing

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

Small
Default
Large 
<div class="input-group input-group-sm mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>

<div class="input-group input-group-lg mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
</div>
Copy
<div class="input-group input-group-sm mb-3">
  <div class="input-group-prepend">
    <label class="input-group-text" for="inputGroup-select-sizing-sm">Small</label>
  </div>
  <select class="custom-select" id="inputGroup-select-sizing-sm">
    <option selected="">Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <label class="input-group-text" for="inputGroup-select-sizing-default">Default</label>
  </div>
  <select class="custom-select" id="inputGroup-select-sizing-default">
    <option selected="">Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<div class="input-group input-group-lg">
  <div class="input-group-prepend">
    <label class="input-group-text" for="inputGroup-select-sizing-lg">Large</label>
  </div>
  <select class="custom-select" id="inputGroup-select-sizing-lg">
    <option selected="">Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>
Copy
Bitcoin Cash
Bitcoin Cash 
<div class="input-group input-group-sm input-group-merge mb-3">
  <div class="input-group-prepend-merge">
    <img class="icon-img" src="../../assets/svg/crypto/bitcoin-cash.svg" alt="Bitcoin Cash">
  </div>
  <input class="form-control form-control-prepend-img" placeholder="Placeholder" type="text">
</div>

<div class="input-group input-group-lg input-group-merge mb-3">
  <div class="input-group-prepend-merge">
    <img class="icon-img" src="../../assets/svg/crypto/bitcoin-cash.svg" alt="Bitcoin Cash">
  </div>
  <input class="form-control form-control-prepend-img" placeholder="Placeholder" type="text">
</div>

<div class="input-group input-group-sm input-group-merge mb-3">
  <div class="input-group-prepend-merge">
    <i class="nova-search icon-text"></i>
  </div>
  <input class="form-control form-control-prepend-icon" placeholder="Search" type="text">
</div>

<div class="input-group input-group-lg input-group-merge">
  <div class="input-group-prepend-merge">
    <i class="nova-search icon-text"></i>
  </div>
  <input class="form-control form-control-prepend-icon" placeholder="Search" type="text">
</div>
Copy

Custom checkbox and radios 

<div class="custom-control custom-checkbox mb-2">
  <input type="checkbox" id="customCheck1" class="custom-control-input" checked>
  <label class="custom-control-label" for="customCheck1">Checkbox label</label>
</div>

<div class="custom-control custom-checkbox">
  <input type="checkbox" id="customCheck2" class="custom-control-input">
  <label class="custom-control-label" for="customCheck2">Checkbox label</label>
</div>
Copy
<div class="custom-control custom-radio mb-2">
  <input type="radio" id="customRadio1" class="custom-control-input" checked="" name="customRadio">
  <label class="custom-control-label" for="customRadio1">Checked</label>
</div>

 <div class="custom-control custom-radio">
   <input type="radio" id="customRadio2" class="custom-control-input" name="customRadio">
   <label class="custom-control-label" for="customRadio2">Checked</label>
 </div>
Copy
<div class="d-flex flex-wrap mb-3">
  <div class="form-check position-relative pl-0 mr-2">
    <input type="checkbox" class="form-check-input invisible" id="check1">
    <label class="checkbox-text position-relative btn btn-outline-primary form-check-label" for="check1">
      <span class="text-unchecked">I Agree</span>
      <span class="text-checked">Agreed!</span>
    </label>
  </div>

  <div class="form-check position-relative pl-0 mr-4">
   <input type="checkbox" class="form-check-input invisible" id="check2" checked="">
     <label class="checkbox-text position-relative btn btn-outline-primary form-check-label" for="check2">
       <span class="text-unchecked">I Agree</span>
       <span class="text-checked">Agreed!</span>
     </label>
   </div>
 </div>

<div class="d-flex flex-wrap">
  <div class="form-check position-relative pl-0 mb-2 mr-2">
    <input type="checkbox" class="form-check-input invisible" id="check3">
    <label class="checkbox-text position-relative btn btn-outline-secondary form-check-label" for="check3">
      <span class="text-unchecked">Copy url</span>
     <i class="nova-check icon-text icon-text-xs text--checked mx-3"></i>
    </label>
  </div>

  <div class="form-check position-relative pl-0">
    <input type="checkbox" class="form-check-input invisible" id="check4" checked="">
    <label class="checkbox-text position-relative btn btn-outline-secondary form-check-label mb-2 mr-2" for="check4">
      <span class="text-unchecked">Copy url</span>
      <i class="nova-check icon-text icon-text-xs text--checked mx-3"></i>
    </label>
  </div>
</div>
Copy
<div class="form-check position-relative pl-0 mb-3">
  <input type="radio" id="check9" class="form-check-input invisible" checked="" name="ExtraLargeSizeRadio">
  <label class="checkbox-text position-relative d-flex align-items-center btn btn-outline-primary form-check-label text-left p-2 p-md-3" for="check9">
    <span>
      <strong class="h5 font-weight-semi-bold mb-1 mb-md-2">Get Started Now for Free</strong>
      <small class="form-check-subtext transition-color-0_15 text-muted d-block">Start your free 14-day trial</small>
    </span>
    <i class="nova-harddrive icon-text icon-text-xl ml-auto"></i>
  </label>
</div>

<div class="form-check position-relative pl-0 mb-3">
  <input type="radio" id="check10" class="form-check-input invisible" name="ExtraLargeSizeRadio">
  <label class="checkbox-text position-relative d-flex align-items-center btn btn-outline-primary form-check-label text-left p-2 p-md-3" for="check10">
  <span>
    <strong class="h5 font-weight-semi-bold mb-1 mb-md-2">Website Builder</strong>
    <small class="form-check-subtext transition-color-0_15 text-muted d-block">Starting at only $3.84/mo*</small>
  </span>
    <i class="nova-hummer icon-text icon-text-xl ml-auto"></i>
  </label>
</div>

<div class="form-check position-relative pl-0">
  <input type="radio" id="check11" class="form-check-input invisible" name="ExtraLargeSizeRadio">
  <label class="checkbox-text position-relative d-flex align-items-center btn btn-outline-primary form-check-label text-left p-2 p-md-3" for="check11">
    <span>
      <strong class="h5 font-weight-semi-bold mb-1 mb-md-2">VPS Hosting</strong>
      <small class="form-check-subtext transition-color-0_15 text-muted d-block">Starting at only $119/mo*</small>
    </span>
    <i class="nova-harddrives icon-text icon-text-xl ml-auto"></i>
  </label>
</div>
Copy

Inline custom checkbox and radios

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

<div class="form-group">
  <div class="form-check form-check-inline">
    <div class="custom-control custom-checkbox">
      <input type="checkbox" id="customInlineCheck1" class="custom-control-input">
      <label class="custom-control-label" for="customInlineCheck1">Unchecked</label>
    </div>
  </div>
  <div class="form-check form-check-inline">
    <div class="custom-control custom-checkbox">
      <input type="checkbox" id="customInlineCheck2" class="custom-control-input indeterminate-checkbox" checked="">
      <label class="custom-control-label" for="customInlineCheck2">Indeterminate</label>
    </div>
  </div>
  <div class="form-check form-check-inline">
    <div class="custom-control custom-checkbox">
      <input type="checkbox" id="customInlineCheck3" class="custom-control-input" checked="">
      <label class="custom-control-label" for="customInlineCheck3">Checked</label>
    </div>
  </div>
</div>
Copy
$('.indeterminate-checkbox').prop('indeterminate', true)
Copy
<div class="form-group">
  <div class="form-check form-check-inline">
    <div class="custom-control custom-radio">
      <input type="radio" id="customInlineRadio1" class="custom-control-input" name="customInlineRadio">
      <label class="custom-control-label" for="customInlineRadio1">Unchecked</label>
    </div>
  </div>
  <div class="form-check form-check-inline">
    <div class="custom-control custom-radio">
      <input type="radio" id="customInlineRadio2" class="custom-control-input indeterminate-checkbox" checked="" name="customInlineRadio">
      <label class="custom-control-label" for="customInlineRadio2">Checked</label>
    </div>
  </div>
  <div class="form-check form-check-inline">
    <div class="custom-control custom-radio">
      <input type="radio" id="customInlineRadio3" class="custom-control-input indeterminate-checkbox" name="customInlineRadio">
      <label class="custom-control-label" for="customInlineRadio3">Unchecked</label>
    </div>
  </div>
</div>
Copy

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>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>
Copy

Validation states

For more inforamation about form validation your can read on Validation page

Valid states

Valid feedback 
<div class="u-has-success mb-3">
   <input type="text" class="form-control" placeholder="Placeholder">
 </div>

 <div class="u-has-succes mb-3">
   <select class="form-control custom-select">
     <option>Choose an option</option>
     <option>2</option>
     <option>3</option>
     <option>4</option>
     <option>5</option>
   </select>
   <small class="text-success">Valid feedback</small>
 </div>

 <div class="u-has-success mb-3">
   <textarea class="form-control" placeholder="Textarea field" rows="4"></textarea>
 </div>

 <div class="u-has-success">
  <div class="custom-file">
    <input type="file" id="customFile" class="custom-file-input">
    <label class="form-control custom-file-label" for="customFile">Choose file</label>
  </div>
</div>
Copy

Invalid states

Invalid feedback 
<div class="u-has-error mb-3">
  <input type="text" class="form-control" placeholder="Placeholder">
</div>

<div class="u-has-error mb-3">
  <select class="form-control custom-select">
    <option>Choose an option</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
  <small class="text-danger">Invalid feedback</small>
</div>

<div class="u-has-error mb-3">
  <textarea class="form-control" placeholder="Textarea field" rows="4"></textarea>
</div>

<div class="u-has-error">
  <div class="custom-file">
    <input type="file" id="customFile" class="custom-file-input">
    <label class="form-control custom-file-label" for="customFile">Choose file</label>
  </div>
</div>
Copy