Layout utilities

Display

Display utilities toggle common CSS display values — including flex, grid, none, and their print: variants — across all six breakpoints. Use them to change an element's rendering mode responsively or to conditionally show and hide content at specific viewport widths.

Flexbox

Chassis CSS uses flexbox for most components, but sets display: flex only where needed rather than globally — a global default would introduce unnecessary overrides and change default browser behaviors in unexpected ways. To apply flexbox to an arbitrary element, add .d-flex or a responsive variant (e.g. .small:d-flex). The full set of flex utilities — alignment, direction, wrapping, ordering, and sizing — only take effect on flex containers.

Grid

Grid utilities control CSS Grid column counts and auto-placement behavior. They complement the CSS Grid layout system when finer control over column distribution or item placement is needed beyond what --cx-grid-columns provides inline.

Float

Float utilities apply float-start, float-end, and float-none across all six breakpoints. Float-based layouts require a clearfix container; see Clearfix for the .clearfix helper.

Container type

Container type utilities set the CSS container-type property on an element, making it a container query context for its descendants. Components whose responsive classes are implemented with @container queries — such as Navbar and Stepper — require a container query ancestor.

Sizing

Sizing utilities set width and height as percentages of the parent element or as viewport-relative values. Use them to constrain or expand an element's dimensions without writing custom CSS.

Margin and padding

Margin and padding utilities control element and component spacing. All classes are responsive and share the $spaces spacing scale. Apply a value at all breakpoints (e.g. .me-medium for margin-inline-end: medium) or prefix with a breakpoint to target specific viewports (e.g. .medium:me-medium from the medium breakpoint up).

Space

Space utilities add consistent spacing between the direct children of an element via margin, without requiring a flex or grid container. Use them when a simple margin-based rhythm is preferable to a full flex or grid layout.

Gap

Gap utilities apply gap, row-gap, and column-gap to flex and grid containers, distributing space between items without adding margin to individual children. All three use the same $spaces spacing scale as margin and padding, and are responsive across all six breakpoints. For gutters in the flexbox grid specifically, see Gutters.

Position

Position utilities set the CSS position property (static, relative, absolute, fixed, sticky) and provide edge-placement classes for top, start, end, and bottom values. A transform-based centering helper is also included for absolutely positioned elements.

Overflow

Overflow utilities configure how content overflows an element's box, covering overflow, overflow-x, and overflow-y. The .overflow-hidden class is commonly used to contain the negative margin bleed from vertical gutters.

Z-index

Z-index utilities provide low-level classes for controlling stacking order on positioned elements. For the component-level z-index scale used by navbars, modals, and tooltips, see Z-index.

Vertical alignment

Vertical alignment utilities set the CSS vertical-align property. They apply only to inline, inline-block, and table-cell elements. For vertically centering block content inside a flex or grid container, use the flex alignment utilities instead.

Visibility

Visibility utilities toggle the CSS visibility property without removing an element from the document flow. Invisible elements remain in place and continue to affect layout, but are hidden from view. To remove an element from layout entirely, use a display utility instead.