Forms

## Layouts

Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options. Read the Official Official Bootstrap Documentation for a full list of instructions and other options.

##### Utilities

Margin utilities are the easiest way to add some structure to forms. They provide basic grouping of labels, controls, optional form text, and form validation messaging.

Example label
Another label

##### Form Grid

More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.

##### Gutters

By adding gutter modifier classes, you can have control over the gutter width in as well the inline as block direction.

More complex layouts can also be created with the grid system.

Email
Password
Address
Address 2
City
State
Zip
Check me out

##### Horizontal Form

Create horizontal forms with the grid by adding the `.row` class to form groups and using the `.col-*-*` classes to specify the width of your labels and controls.

Email
Password
Radios
First radio
Second radio
Third disabled radio
Example checkbox

##### Column Sizing

As shown in the previous examples, our grid system allows you to place any number of `.col` within a `.row`. They’ll split the available width equally between them.

##### Auto Sizing

The example below uses a flexbox utility to vertically center the contents and changes `.col` to `.col-auto` so that your columns only take up as much space as needed.

Name
Username
@
Preference
Remember me

##### Inline Forms

Use the `.row-cols-*` classes to create responsive horizontal layouts. By adding gutter modifier classes, we’ll have gutters in horizontal and vertical directions.

Username
@
Preference
Remember me