Form Elements header small text goes here...
Inputs & Select & Textarea
Most common form control, text-based input fields. Text Inputs also includes support for all HTML5 types.
Checkboxes & Radios
Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
Inline Checkboxes & Radios
Checkboxes and radios without label text
Should you have no text within the <label>
, the input is positioned as you'd expect.
Currently only works on non-inline checkboxes and radios.
Control sizing
Set heights using classes like .form-control-lg
, and set widths using grid column classes like .col-lg-*
.
Horizontal form group sizes
Quickly size labels and form controls within .form-horizontal
by adding .form-group-lg
or .form-group-sm.
Validation states
Bootstrap includes validation styles for error, warning, and success states on form controls.
To use, add .has-warning
, .has-error
, or .has-success
to the parent element.
Checkbox Validation States
Radio Button Validation States
Input Groups
Extend form controls by adding text or buttons before, after, or on both sides of any text-based
<input>
. Use .input-group
with an .input-group-prepend
, .input-group-append
to prepend or append elements to a single .form-control
.
Input Groups Sizing
Add the relative form sizing classes .input-group-lg
, .input-group-sm
to the .input-group
itself
and contents within will automatically resize
Basic Example
Individual form controls automatically receive some global styling.
All form elements with .form-control
are set to width: 100%;
by default.
Horizontal Form Form
Use Bootstrap's predefined grid classes to align labels and groups
of form controls in a horizontal layout by adding .form-horizontal
to the form.
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.