Forms

These modular elements can be readily used and customized in every layout across pages.

For detail documentation. View Forms on Bootstrap ⟶

Basic Form
We'll never share your email with anyone else.
<form>
  <div class="mb-3"><label class="form-label" for="exampleInputEmail1">Email address</label><input class="form-control" id="exampleInputEmail1" type="email" aria-describedby="emailHelp" />
    <div class="form-text" id="emailHelp">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3"><label class="form-label" for="exampleInputPassword1">Password</label><input class="form-control" id="exampleInputPassword1" type="password" /></div>
  <div class="mb-3 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-dark" type="submit">Submit</button>
</form>
Form Controls
<div class="mb-3"><label class="form-label" for="exampleFormControlInput1">Email address</label><input class="form-control" id="exampleFormControlInput1" type="email" placeholder="name@example.com" /></div>
<div class="mb-3"><label class="form-label" for="exampleFormControlTextarea1">Example textarea</label><textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea></div>
Form Select
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
  <option selected="selected">Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select><select class="form-select mb-3" aria-label=".form-select-lg example">
  <option selected="selected">Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three </option>
</select><select class="form-select form-select-sm" aria-label=".form-select-sm example">
  <option selected="selected">Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
Form Multiple Select
<select class="form-select mb-3" multiple="multiple" aria-label="multiple select example">
  <option selected="selected">Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select><select class="form-select" size="3" aria-label="size 3 select example">
  <option selected="selected">Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three </option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>
Checkboxes
<div class="form-check"><input class="form-check-input" id="flexCheckDefault" type="checkbox" /><label class="form-check-label" for="flexCheckDefault">Default checkbox</label></div>
<div class="form-check"><input class="form-check-input" id="flexCheckChecked" type="checkbox" /><label class="form-check-label" for="flexCheckChecked">Checked checkbox</label></div>
Radios
<div class="form-check"><input class="form-check-input" id="flexRadioDefault1" type="radio" name="flexRadioDefault" /><label class="form-check-label" for="flexRadioDefault1">Default radio</label></div>
<div class="form-check"><input class="form-check-input" id="flexRadioDefault2" type="radio" name="flexRadioDefault" /><label class="form-check-label" for="flexRadioDefault2">Default checked radio</label></div>
Inline Radios
<div class="form-check form-check-inline"><input class="form-check-input" id="inlineRadio1" type="radio" name="inlineRadioOptions" value="option1" /><label class="form-check-label" for="inlineRadio1">1</label></div>
<div class="form-check form-check-inline"><input class="form-check-input" id="inlineRadio2" type="radio" name="inlineRadioOptions" value="option2" /><label class="form-check-label" for="inlineRadio2">2</label></div>
<div class="form-check form-check-inline"><input class="form-check-input" id="inlineRadio3" type="radio" name="inlineRadioOptions" value="option3" disabled="disabled" /><label class="form-check-label" for="inlineRadio3">3 (disabled)</label></div>
Disabled
<div class="form-check"><input class="form-check-input" id="flexCheckDisabled" type="checkbox" disabled="disabled" /><label class="form-check-label" for="flexCheckDisabled">Disabled checkbox</label></div>
<div class="form-check"><input class="form-check-input" id="flexCheckCheckedDisabled" type="checkbox" checked="checked" disabled="disabled" /><label class="form-check-label" for="flexCheckCheckedDisabled">Disabled checked checkbox</label></div>
Disabled Switches
<div class="form-check form-switch"><input class="form-check-input" id="flexSwitchCheckDisabled" type="checkbox" role="switch" disabled="disabled" /><label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label></div>
<div class="form-check form-switch"><input class="form-check-input" id="flexSwitchCheckCheckedDisabled" type="checkbox" role="switch" checked="checked" disabled="disabled" /><label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label></div>
Range Input
<label class="form-label" for="customRange1">Example range</label><input class="form-range" id="customRange1" type="range" />
File Browser
<div class="mb-3"><label class="form-label" for="formFile">Default file input example</label><input class="form-control" id="formFile" type="file" /></div>
<div class="mb-3"><label class="form-label" for="formFileMultiple">Multiple files input example</label><input class="form-control" id="formFileMultiple" type="file" multiple="multiple" /></div>
<div class="mb-3"><label class="form-label" for="formFileDisabled">Disabled file input example</label><input class="form-control" id="formFileDisabled" type="file" disabled="disabled" /></div>
<div class="mb-3"><label class="form-label" for="formFileSm">Small file input example</label><input class="form-control form-control-sm" id="formFileSm" type="file" /></div>
<div><label class="form-label" for="formFileLg">Large file input example</label><input class="form-control form-control-lg" id="formFileLg" type="file" /></div>