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>