Form Layouts

Stack, horizontal, grid, and inline form arrangements.

Stacked registration form

Account type

Horizontal form

Labels sit beside fields on wide viewports and stack on small ones.

Address grid

Uneven columns mirror common city / state / zip layouts without Bootstrap col-* classes.

Inline toolbar form

Compact filters keep visible labels. An input group can sit in the same row as a select and checkbox.

@

Important pattern

Prefer CSS Grid fractions for address rows instead of framework column classes.

.address-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 44rem) {
  .address-grid {
    grid-template-columns: 7fr 2.5fr 2.5fr;
  }
}