Form controls
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Form controls on Bootstrap<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><div class="mb-3"><input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example" /></div>
<div class="mb-3"> <input class="form-control" type="text" placeholder="Default input" aria-label="default input example" /></div>
<div class="mb-3"> <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example" /></div><div class="mb-3 row"><label class="col-sm-2 col-form-label" for="staticEmail">Email</label>
<div class="col-sm-10"><input class="form-control-plaintext outline-none" id="staticEmail" type="text" readonly="" value="email@example.com" />
<div class="mb-3 row"></div>
</div><label class="col-sm-2 col-form-label" for="inputPassword">Password</label>
<div class="col-sm-10"><input class="form-control" id="inputPassword" type="password" /></div>
</div><div class="mb-3"><label class="form-label" for="customFile">File input example</label><input class="form-control" id="customFile" type="file" /></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="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="customFileSm">Small file input example</label><input class="form-control form-control-sm" id="customFileSm" type="file" /></div>
<div class="mb-3"><label class="form-label" for="customFileLg">Large file input example</label><input class="form-control form-control-lg" id="customFileLg" type="file" /></div><div class="mb-3"><label class="form-label" for="customDatalist">Choose your browser from the list:</label><input class="form-control form-control-sm" id="customDatalist" list="browsers" name="browser" /><datalist id="browsers">
<option value="Edge"> </option>
<option value="Firefox"> </option>
<option value="Chrome"> </option>
<option value="Opera"> </option>
<option value="Safari"></option>
</datalist></div>
