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="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@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>
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="customFileLg">Small file input example</label><input class="form-control form-control-sm" id="customFileLg" type="file" /></div>
<div class="mb-3"><label class="form-label" for="customFileSm">Large file input example</label><input class="form-control form-control-lg" id="customFileSm" type="file" /></div>

Thank you for creating with Falcon |
2021 © Themewagon

v3.0.0-beta5

customize