Columns

Every level of a schema is a 12 column Bootstrap grid. The number of columns is set per container, 1 to 4:

Container	Columns
$form->columns(2)	top level of the form, default 1
Grid::make(2)	default 2
Section::make('…')->columns(2)	default 1
Tab::make('…')->columns(2), Step::make('…')->columns(2)	default 1

Values outside 1 to 4 are clamped.

Width of a component

Fields take one column. Layouts (Grid, Section, Tabs, Wizard) take the full width of their container. Change it with:

Method	Effect
columnSpan(n)	n columns (1 to 4); a span equal to or larger than the columns of the container is the full width
columnSpanFull()	always the full width

Section::make('Request')->columns(2)->schema([
    TextInput::make('title')->required()->maxLength(150)->columnSpanFull(),
    NumberInput::make('amount')->currency('EUR')->min(0)->required(),
    TextInput::make('supplier')->maxLength(150),
    Textarea::make('description')->rows(3)->columnSpanFull(),
]),

Two sections side by side: give the form two columns and the sections one each.

$form->columns(2)->schema([
    Section::make('Billing address')->columnSpan(1)->schema([...]),
    Section::make('Delivery address')->columnSpan(1)->schema([...]),
    Section::make('Notes')->schema([...]),   // full width
]);

Small screens

Below Bootstrap’s md breakpoint (768px) every component takes the full width, one below the other, in the order of the schema. Order the schema so that it reads well in one column.

Typical widths

Field	Usually
Textarea, MarkdownEditor, Repeater	columnSpanFull()
CheckboxList with several columns	columnSpanFull()
short inputs (zip code, number, date)	one column, or a Grid with 3–4 columns