Grid and Bootstrap column helpers

POM's bundled grid uses rows and a 12-column system.

<div class="row">
    <div class="col-12 col-md-8">Main content</div>
    <aside class="col-12 col-md-4">Sidebar</aside>
</div>

Column classes are available as col, col-1 through col-12 and responsive col-sm-*, col-md-*, and col-lg-*. A class applies at its breakpoint and above until another class overrides it. POM does not generate an extra-large column tier.

Remove gutters

Add no-gutters to a row when its immediate columns must have no horizontal padding:

<div class="row no-gutters">
    <div class="col-6">First column</div>
    <div class="col-6">Second column</div>
</div>

Only no-gutters is supported for removing row gutters. Apply component-specific spacing when a layout needs gutters other than the standard row gutter.

Responsive push and pull positioning

Grid columns are positioned relatively, so POM's push-* and pull-* helpers can shift them visually without changing their document order. The numeric suffix uses the same 12-column proportions as the grid:

<div class="row">
    <div class="col-6 push-md-6">Visually shifted right from the medium breakpoint</div>
    <div class="col-6 pull-md-6">Visually shifted left from the medium breakpoint</div>
</div>

The base variants are push-0 through push-12 and pull-0 through pull-12. Responsive variants use the sm, md, and lg infixes, for example push-sm-4, pull-md-6, or push-lg-2. The zero variant restores the corresponding left or right property to auto.

These helpers change only visual positioning. Keep the source order meaningful for keyboard navigation, screen readers, and narrow layouts, and prefer normal column ordering when the content order itself should change.

Use push-* and pull-* for an intentional visual shift, or assign explicit responsive column widths to each child when a row needs a fixed number of columns. Offset and automatic row-count class families are not generated.

Plan widths mobile-first

Start with the smallest-screen width, usually col-12, and add only the breakpoints where the layout meaningfully changes. Column widths in one row should normally total 12 at each breakpoint, although wrapping is valid when a listing intentionally continues onto another line.

Nested grids require a new .row inside a column. Do not place a row directly inside another row, and do not use a column without a row merely to copy its padding. Check the result immediately around every breakpoint and with the longest realistic content.

Do not place col-* outside a row merely to obtain a width. Keep source order meaningful; responsive visual rearrangement must not make keyboard/reading order confusing.