Basic FormA simple and user-friendly Basic form
Individual form controls automatically receive some global styling. All textual
<select> elements with
.form-control are set
width: 100%; by default. Wrap labels and controls in
.form-group for optimum spacing.
.form-inline to your form (which doesn't have to be a
<form> ) for left-aligned
and inline-block controls. This only applies to forms within viewports that are at least 768px wide.
Here are examples of
.form-control applied to each textual HTML5
Checkboxes & Radios
How it works
Here’s a rundown of how they work:
- To use, add
.has-successto the parent element. Any
.form-control, or custom form element will receive the validation styles.
- Contextual validation text, in addition to your usual form field help text, can be added with the use of
.form-feedback. This text will adapt to the parent
.has-*class. By default it only includes a bit of
marginfor spacing and a modified
colorfor each state.
- Validation icons are
url()s configured via Sass variables that are applied to
background-imagedeclarations for each state.
- You may use your own base64 PNGs or SVGs by updating the Sass variables and recompiling.
- Icons can also be disabled entirely by setting the variables to
noneor commenting out the source Sass.
Horizontal Form Validation
disabled boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a
Set heights using classes like
.input-lg, and set widths using grid column classes like