Horizontal Form Examples

Basic Horizontal Layout

Traditional label-input alignment using col-form-label and grid columns.

Account Settings
@
Your unique username cannot be changed.
Key pattern: col-form-label vertically centers labels with inputs. Use offset-sm-3 to align buttons.

Horizontal Radio and Checkbox Groups

Organizing radios and checkboxes in horizontal form layouts.

Notification Preferences
Email Frequency
Theme
Notify Me About
Key pattern: Use fieldset with legend.col-form-label for grouped radios/checkboxes. Add pt-0 to remove top padding.

Horizontal Form Sizing

Different label and input sizes for horizontal forms.

Key pattern: Match col-form-label-lg with form-control-lg for consistent vertical alignment.

Responsive Horizontal Forms

Forms that switch from stacked to horizontal at different breakpoints.

Company Information
https://
Key pattern: Use col-md-4 col-lg-3 for label width that adjusts at breakpoints. Match offsets for button alignment.

Readonly and Plaintext Display

Displaying form data as plaintext while maintaining horizontal alignment.

Profile Summary (View Only)
Edit Profile
Key pattern: form-control-plaintext displays value without input styling while maintaining alignment.