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 BootstrapExample
<div class="mb-3">
<label class="form-label" for="exampleFormControlInput1">Email address</label>
<input class="form-control" id="exampleFormControlInput1" type="email" placeholder="[email protected]" />
</div>
<div class="mb-3">
<label class="form-label" for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>Sizing
<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>Readonly plain text
If you want to have input readonly elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.
<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 protected]" />
<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>File Input
The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose File and selected file name text.
<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>File Input Sizing
You may also choose from small and large file inputs to match our similarly sized text inputs.
<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>Datalist
<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>
