Flexbox options #

Flexbox is used to build UX4G, but not every element's display was changed to display: flex because doing so would add a lot of extra overrides and unintentionally alter important browser behavior. The majority of the components were created with Flexbox support.

When adding display: flex to an element, use .d-flex or one of the responsive alternatives (like .d-sm-flex). If you want to use our additional flexbox utilities for sizing, alignment, spacing, and other things, you'll need this class or display value.

Margin and padding #

To adjust how items and components are spaced and scaled, use the margin and padding spacing functions. Based on a 1rem value default $spacer variable, UX4G contains a six-level scale for spacing utilities. Choose settings that apply to all viewports (such as .me-3 for margin-right: 1rem in LTR) or responsive variations that target particular viewports (such as .me-md-3 for margin-right: 1rem —in LTR— starting at the md breakpoint).

Toggle visibility #

When toggling display isn't needed, you can toggle the visibility of an element with our visibility utilities. Invisible elements will still affect the layout of the page, but are visually hidden from visitors.