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
Example
<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>

Thank you for creating with Falcon |
2020 © Themewagon

v3.0.0-alpha10