Basic layout
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. Checkboxes and radios require wrapper with
.form-check-horizontal class.
Right aligned labels
To avoid large white space between labels and form elements on
wide screens, labels can be aligned to the right with
.text-[breakpoint]-end class. UX guidelines suggest
this layout as it brings the label closer to the field to make
scanning the form faster and easier. But it doesn't work for all
use cases (heavy multi column forms, forms in popups etc) as it
also creates a large white space on the left side.
Fieldsets with legend
The
<legend> HTML element represents a caption
for the content of its parent <fieldset>.
According to standards, it must be used inside field set, but
thanks to helper classes, the look and feel can be justified and
legends and regular text dividers can look the same. If you care
about accessibility in your project, always use recommended
markup structure to fully support screen readers.
Static mode
Static elements in horizontal form require additional classes or
attributes to keep the spacing and styling consistent. If you
want to have
<input readonly> elements in your
form styled as plain text for instance, use the
.form-control-plaintext class to remove the default
form field styling and preserve the correct margin and padding.
Centered form
Horizontal form can have a %-based width and aligned to the
center. Use a regular grid markup with offsetting classes as a
form wrapper. Mind the breakpoint in
.col-* classes
to ensure the proper width is used on small screens. This
example is using lg breakpoint, which means on
desktop screens the form has 33.3% width and 100% on small
screens.
Centered card
Here the logic is similar to previous example, but instead
of wrapping the form in grid containers, the grid is applied
to the card that contains the form. Form elements in this
case always have 100% width and form width is controlled by
grid columns width.
