Basic layout
Vertical form is the most common layout. Since Bootstrap applies
display: block and width: 100% to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis. Also use .form-label class in labels to add bottom margin. Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.
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 vertical 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 optional .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.
Centered form
Vertical 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.
