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 using .input-sm - .input-lg.

Sizing

Small

Default

Large

Small

Default

Large

Grid sizing

.col-xs-5.col-md-2

.col-xs-6.col-md-3

.col-xs-7.col-md-4

.col-xs-8.col-md-5

.col-xs-8.col-md-6

.col-xs-7.col-md-5

.col-xs-6.col-md-4

.col-xs-5.col-md-3

.col-xs-4.col-md-2

Complete grid sizing

Take a look at Grid page

Additional form styles

Striped form

Text field

Password field

Textarea

Disabled input

Save

Vertical form