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.

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.

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 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.

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.