Form

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Forms on Bootstrap
Form control
Style textual inputs and textareas with support for multiple states.
Select
Improve browser default select elements with a custom initial appearance.
Checks
Use our custom radio buttons and checkboxes in forms for selecting
input options.
File
Replace browser default file inputs with our custom version with
optional JavaScript.
Range
Replace browser default range inputs with our custom version.
Input group
Attach labels and buttons to your inputs for increased semantic value.
Layout
Create inline, horizontal, or complex grid-based layouts with your forms.
Validation
Validate your forms with custom or native validation behaviors and styles.
Overview

Bootstrap’s form controls expand on their Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.

Be sure to use an appropriate typeattribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.

Basic Form
We'll never share your email with anyone else.
<form>
  <div class="mb-3"><label class="form-label" for="exampleInputEmail1">Email address</label><input class="form-control" id="exampleInputEmail1" type="email" aria-describedby="emailHelp" />
    <div class="form-text" id="emailHelp">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3"><label class="form-label" for="exampleInputPassword1">Password</label><input class="form-control" id="exampleInputPassword1" type="password" /></div>
  <div class="mb-3 form-check"><input class="form-check-input" id="exampleCheck1" type="checkbox" /><label class="form-check-label" for="exampleCheck1">Check me out</label></div><button class="btn btn-primary" type="submit">Submit</button>
</form>

Thank you for creating with Falcon |
2020 © Themewagon

v3.0.0-alpha10