Alignment helpers

POM text helpers:

• alignleft / align-left
• aligncenter / align-center
• alignright / align-right
• text-md-down-center (centers text and its descendants at widths up to 991px)
• web-center-mobile (legacy alias of text-md-down-center for existing content)

The retained breakpoint-specific text helpers are text-sm-left and text-sm-right; both apply from 576px upward. The explicit md-down direction is used when alignment must apply only to phones and tablets, leaving desktop alignment unchanged.

For flex layouts, use the bundled Bootstrap-style utilities:

<div class="d-flex justify-content-between align-items-center">…</div>

Flex direction is available only through the mobile-first flex-row and flex-column helpers. Wrapping is available as flex-wrap and flex-nowrap, with flex-sm-*, flex-md-*, and flex-lg-* variants. Other direction, sizing, and extra-large flex utility variants are not part of the theme.

Common groups include:

• justify-content-start|end|center|between|around.

POM limits main-axis alignment to those five non-responsive justify-content-* helpers. It limits cross-axis alignment to the mobile-first align-items-start, align-items-end, and align-items-center classes used by theme layouts. Other cross-axis and responsive alignment variants are not part of the theme. Flexbox's default stretch behavior remains available without a class.

Alignment utilities affect different axes. In a normal row-direction flex container, justify-content-* controls the horizontal main axis and align-items-* controls the vertical cross axis. If the container switches to flex-column, those practical directions switch as well.

Test centered or right-aligned controls with long translated labels. Do not use whitespace, empty columns, or non-breaking spaces to simulate alignment.

Text alignment does not change DOM order. Use CSS alignment for presentation and keep the source/keyboard order meaningful.