Forms

Basic example

This form example contains the default form elements with the recommend HTML structure.

Input

Standard input

The input is wrapped in a div with the class .formfield.

Input with button

Wrap the input en button in a div with the class .input-combined

Label placement

Add the classes .label-above, .label-top or .label-bottom to your field to adjust the position of the label. This not only works with inputs, but with textareas as well!

Moves above the input
Moves to top inside the input
Moves to bottom inside the input

Textarea

							

								
    
									
  • 
										
										
									
    • 
									
  • 
										
										
									
    •
Remember the label placements mentioned above? The classes .label-bottom, .label-top and .label-above also work well with textareas. By default all labels are vertical-aligned in the middle. If you want to prevent this behaviour with textarea's you can add a parent class of .input-textarea

Checkbox

Standard checkbox

Select your favorite fruit 
								
    
									
  • 
										
										
										
										
									
    •

Checkbox right of the label

Add the class .label-left to a parent of the .input-checkbox.

Select your favorite fruit

Radio

Vertical radios
Horizontal radios

Radios can be horizontal as well. Add the class .form-horizontal to a parent of the field(s) you want to make horizontal, as shown in the example below.

Select

Inline forms

Add .form-horizontal to your form, field or label. The elements will be left-aligned.

Horizontal checkboxes
Horizontal radios
Input with add-on and button