Vertical: The standard form layout with labels stacked above inputs. Best for most forms, especially on mobile devices and when label text varies in length.

Horizontal: Labels positioned beside inputs, ideal for settings forms, admin panels, and when you have consistent short labels. The label aligns with the input's text baseline.

Inline: Multiple form groups arranged horizontally in a row. Perfect for search bars, filter controls, and compact data entry. Groups automatically flex to fill available space.

Floating: Modern minimal design where the label floats inside the input and animates up on focus or when a value is entered. Requires placeholder=" " (space) for the CSS to detect empty state.

Form Row: Multi-column form layouts using a flexible grid system. Columns automatically stack on mobile. Use column width classes to control proportions.

Form Sections: Group related fields together with a title and optional description. Sections have visual separation via borders.

Validation: Form groups work seamlessly with validation states. Error and success messages appear below the input in all layout types.

Compact: Use .form-group-sm for reduced spacing between form groups, ideal for dense forms or modal dialogs.

Complete Example: A registration form combining multiple layout patterns for a polished user experience.