Forms styles and features

Example form

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl est, vulputate at porttitor non, interdum a mauris. Phasellus imperdiet gravida pulvinar.

Full name

Street

Description for street field

City

Company

Dapibus suscipit arcu

Proin eu nibh ut urna tristique rhoncus. Sed euismod, quam sed dignissim imperdiet, nulla leo vehicula mi, a sagittis lacus augue nec sapien.

Disabled input

Inline 1 Inline 2 Inline 3

Money

$ .00

Save

Detailed look on form elements

List of all frequently used form elements that you'll need.

Prepends and appends

Text inputs can be prepended/appended with buttons, text labels, etc.

Prepends and appends

Prepended input

Appended input

.00

Combined

$ .00

With buttons

With dropdowns

Sizes

All form elements can be sized in relative way (using .input-mini - .input-xxlarge, ...) or in percentage way (using .span1 - .span12).

Relative sizing

Mini

Small

Medium

Large

XLarge

XXLarge

Block level

Grid sizing

.span1

.span2

.span3

.span2

.span1

Complete grid sizing

.span1 - .span11

.span2 - .span10

.span3 - .span9

.span4 - .span8

.span5 - .span7

.span6 - .span6

.span7 - .span5

.span8 - .span4

.span9 - .span3

.span10 - .span2

.span11 - .span1

.span12

Additional form styles

Striped form

Vertical form

Text field

Password field

Textarea

Uneditable input

Some value here

Disabled input

Save