Basic Form

Tabs styles and versions
  1. Home
  2. Forms
  3. Basic Form

Form 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.

We'll never share your email with anyone else.
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
Radio buttons

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

Checkboxes

Basic

Supports bootstrap brand colors: .checkbox-primary, .checkbox-info etc.

Inline checkboxes

Circled

.checkbox-circle for roundness.

Disabled

Disabled state also supported.

Radios

Basic

Supports bootstrap brand colors: .radio-primary, .radio-danger etc.

Inline radios

Disabled

Disabled state also supported.

Validation

How it works

Here’s a rundown of how they work:

  • To use, add .has-warning, .has-danger, or .has-success to 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 of margin for spacing and a modified color for each state.
  • Validation icons are url()s configured via Sass variables that are applied to background-image declarations 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 none or commenting out the source Sass.
Example help text that remains unchanged.
Example help text that remains unchanged.
Example help text that remains unchanged.

Horizontal Form Validation

Example help text that remains unchanged.
Example help text that remains unchanged.
Example help text that remains unchanged.

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-*.