Form Patterns

Vertical form elements please see Bootstrap forms

Vertical form elements assume 100% width by default. The form elements may be placed inside containers with a specified col-sm-# class to control the layout, or the col-sm-# class may be applied to individual DIVs within the form-group for greater control over the layout of the individual form elements.

Example

Email address

Password

File input

This is help text which may provide helpfull tips or special intructions or cautionary advice.

Check me out

Label for Checkboxes
Blah
Option 2
Option 3

Label for Radio Buttons
Option 1
Option 2
Option 3

Label for Select Select Action Another action Something else here

Submit

Horizontal form see Bootstrap horizontal form

Horisontal forms should have a wrapper class form-horizontal

Form layout is built using Bootstrap grid system:

<form class="form-horizontal">
   <div class="form-group row">
      <label for="input-id" class="col-sm-3 control-label required">Input label</label>
      <div class="col-sm-6">
         <input id="input-id" type="text" class="form-control" placeholder="" value="" />
      </div>
   </div>	
</form>

Use Bootstrap col-sm-# classes in order to align form fields and labels in 12-column grid.

Example

Text Field

This is help text which may provide helpfull tips or special intructions or cautionary advice.

Label for Checkboxes

Option 1 Option 2 Option 3

Label for Dropdown

Select Action Another action Something else here

Password

Field Label Here

Radio Label Here

Option 1 Option 2

Sign in