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="search" 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>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="deafult 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" 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>
