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>