Basic Form
A simple and user-friendly Basic formForm controls
Individual form controls automatically receive some global styling. All textual <input>,
<textarea>, and <select> elements with .form-control are set
to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
Inline form
Add .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.
Textual inputs
Here are examples of .form-control applied to each textual HTML5 <input> type.
Checkboxes & Radios
Validation
How it works
Here’s a rundown of how they work:
- To use, add
.has-warning,.has-danger, or.has-successto the parent element. Any.col-form-label,.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 ofmarginfor spacing and a modifiedcolorfor each state. - Validation icons are
url()s configured via Sass variables that are applied tobackground-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 state
Add the disabled boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a not-allowed cursor.
Control sizing
Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.