Form

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

Forms on Bootstrap

Basic Form

Name

Read Only

Read only plain text

Password

Cehckbox

Disabled checkbox

Default radio

Disabled radio

Example file input

Example select

Example multiple select

Example textarea

Example Range input

<form>
  <div class="form-group">
    <label for="name">Name</label>
    <input class="form-control" id="name" type="text" placeholder="Name" />
  </div>
  <div class="form-group">
    <label for="readonly">Read Only</label>
    <input class="form-control" id="readonly" type="text" placeholder="Readonly input here…" readonly="" />
  </div>
  <div class="form-group">
    <label>Read only plain text</label>
    <input class="form-control-plaintext" id="staticEmail" type="text" readonly="" value="email@example.com" />
  </div>
  <div class="form-group">
    <label for="email1">Email</label>
    <input class="form-control" id="email1" type="email" placeholder="Email" />
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input class="form-control" id="password" type="password" placeholder="Password" />
  </div>
  <div class="form-group form-check">
    <input class="form-check-input" id="defaultcheckbox1" type="checkbox" />
    <label class="form-check-label" for="defaultcheckbox1">Cehckbox</label>
  </div>
  <div class="form-group 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-group form-check">
    <input class="form-check-input" id="exampleRadios2" type="radio" name="exampleRadios" value="option2" />
    <label class="form-check-label" for="exampleRadios2">Default radio</label>
  </div>
  <div class="form-group 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>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input class="form-control-file" id="exampleFormControlFile1" type="file" />
  </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>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input class="form-control-range" id="formControlRange" type="range" />
  </div>
</form><button class="btn btn-primary mb-3" type="submit">Save</button>

Input Group

@example.com

Your vanity URL

.00

With textarea

First and last name

$0.00

<div class="input-group mb-3">
  <div class="input-group-prepend"><span class="input-group-text" id="basic-addon1">@</span></div><input class="form-control" type="text" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
</div>
<div class="input-group mb-3"><input class="form-control" type="text" 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><label for="basic-url">Your vanity URL</label>
<div class="input-group mb-3">
  <div class="input-group-prepend"><span class="input-group-text" id="basic-addon3">#</span></div><input class="form-control" id="basic-url" type="text" aria-describedby="basic-addon3" />
</div>
<div class="input-group mb-3">
  <div class="input-group-prepend"><span class="input-group-text">$</span></div><input class="form-control" type="text" aria-label="Amount (to the nearest dollar)" />
  <div class="input-group-append"><span class="input-group-text">.00</span></div>
</div>
<div class="input-group mb-3">
  <div class="input-group-prepend"><span class="input-group-text">With textarea</span></div><textarea class="form-control" aria-label="With textarea"></textarea>
</div>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text"><input type="checkbox" aria-label="Checkbox for following text input" /></div>
  </div><input class="form-control" type="text" aria-label="Text input with checkbox" />
</div>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text"><input type="radio" aria-label="Radio button for following text input" /></div>
  </div><input class="form-control" type="text" aria-label="Text input with radio button" />
</div>
<div class="input-group mb-3">
  <div class="input-group-prepend"><span class="input-group-text">First and last name</span></div><input class="form-control" type="text" aria-label="First name" /><input class="form-control" type="text" aria-label="Last name" />
</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 class="form-control" type="text" aria-label="Dollar amount (with dot and two decimal places)" />
</div>
<div class="input-group mb-3"><input class="form-control" type="text" 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>
<div class="input-group mb-3">
  <div class="input-group-prepend"><button class="btn btn-primary dropdown-toggle shadow-none" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider" role="separator"></div><a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div><input class="form-control" type="text" aria-label="Text input with dropdown button" />
</div>
<div class="input-group"><input class="form-control" type="text" aria-label="Text input with dropdown button" />
  <div class="input-group-append"><button class="btn btn-primary dropdown-toggle shadow-none" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider" role="separator"></div><a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

Custom Forms

For even more customization and cross-browser consistency, use Bootstrap's completely custom form elements to replace the browser defaults.

Custom-Forms on Bootstrap

Checkboxes

Check this custom checkbox

Check another custom checkbox

<div class="custom-control custom-checkbox">
  <input class="custom-control-input" id="customCheck1" type="checkbox" />
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
<div class="custom-control custom-checkbox">
  <input class="custom-control-input" id="customCheck2" type="checkbox" />
  <label class="custom-control-label" for="customCheck2">Check another custom checkbox</label>
</div>

Radios

Toggle this custom radio

Or toggle this other custom radio

<div class="custom-control custom-radio">
  <input class="custom-control-input" id="customRadio1" type="radio" name="customRadio" />
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input class="custom-control-input" id="customRadio2" type="radio" name="customRadio" />
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

Inline Radios

Select one option

Toggle

Or toggle this

<div class="custom-control pl-0"><label class="mb-0">Select one option</label></div>
<div class="custom-control custom-radio custom-control-inline">
  <input class="custom-control-input" id="customRadioInline1" type="radio" name="customRadioInline1" />
  <label class="custom-control-label" for="customRadioInline1">Toggle</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input class="custom-control-input" id="customRadioInline2" type="radio" name="customRadioInline1" />
  <label class="custom-control-label" for="customRadioInline2">Or toggle this</label>
</div>

Disabled

Check this custom checkbox

Toggle this custom radio

<div class="custom-control custom-checkbox">
  <input class="custom-control-input" id="customCheckDisabled1" type="checkbox" disabled="" />
  <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>
<div class="custom-control custom-radio">
  <input class="custom-control-input" id="customRadioDisabled2" type="radio" name="radioDisabled" disabled="" />
  <label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>

Switches

Toggle this switch element

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

Disabled Switches

Disabled switch element

<div class="custom-control custom-switch">
  <input class="custom-control-input" id="customSwitch2" type="checkbox" disabled="" />
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

Custom Select

<select class="custom-select mb-3 custom-select-lg mb-3">
  <option selected="">Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select class="custom-select mb-3">
  <option selected="">Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select class="custom-select mb-3 custom-select-sm mb-3">
  <option selected="">Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Multiple Select

<select class="custom-select mb-3" multiple="">
  <option selected="">Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select class="custom-select mb-3" multiple="" size="3">
  <option selected="">Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Range Input

Example range

<label for="customRange1">Example range</label>
<input class="custom-range" id="customRange1" type="range">

File Browser

Choose file

<div class="custom-file">
  <input class="custom-file-input" id="customFile" type="file">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Get latest news
in your box!

Get Special Offers & Deals. We Never Spam.

Consultancy For the Animal Rights?