Forms

By default, inputs are horizontally-arranged; however, you can customize the layout of forms along both the X and Y axis

Basic Form

The basic form has the default horizontally-arranged inputs, 1 per line:

Profile InfoProfile Info

Horizontal Inputs

The horizontal input class is useful if you need to have an input occupy the remainder of the row; otherwise, the default will work just as well:

Profile InfoProfile Info

Vertical Inputs

For inputs that should be displayed in their own row, simply use the vertical inputs class:

User RegistrationUser Registration

Inline Form

Use this form for inline form elements. They will fold over to the next page when the screen resizes beyond them:

Profile InfoProfile Info

Address Form

Address InformationAddress Information

Appended Controls

ExpensesExpenses
Share and TellShare and Tell

Grid Form

You can use the grid-system component to build any type of form layout. Simply use the grid classes:

Grid FormGrid Form

Note: do not use the specific form classes to build the form (.form-field-horizontal,.form-field-vertical)

Fieldset Grids

It may make sense to display sections of a form (fieldsets) beside each other. Do this using the grid:

User RegistrationUser Registration
Address InformationAddress Information