Form Layouts
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.
We recommend sticking to margin-bottom
utilities, and using a single direction throughout the form for consistency.
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. Also requires the
$enable-grid-classes
Sass variable to be enabled (on by default).
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. Be sure to add .col-form-label
to your
<label>
s as well so they’re vertically centered with their
associated form controls.
Horizontal form label sizing
Be sure to use .col-form-label-sm
or .col-form-label-lg
to
your <label>
s or <legend>
s to correctly follow
the size of .form-control-lg
and .form-control-sm
.
Column sizing
As shown in the previous examples, our grid system allows you to place any number of
.cols
within a .row
. They’ll split the available width
equally between them. You may also pick a subset of your columns to take up more or
less space, while the remaining .cols
equally split the rest, with
specific column classes like .col-sm-7
.
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. Put another way, the column sizes itself based on the contents.
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.