Meta Row — Reference

Look up the controls for Meta Row and understand the markup, values and visual behavior they configure.

Meta Row

Meta Row settings and events. Select the component in App Structure to find these controls in Properties.

Meta Row

Name	Description
ID	Sets this element’s unique page identifier. Use a stable name such as projectSummary when another control, label or anchor must target it. Do not duplicate a static ID inside repeated markup; a component binding name and a form field’s submitted Name serve different purposes.
Class	Edits the element’s space-separated CSS class list. For example, add a project-defined class such as project-summary only when your stylesheet defines it. Preserve classes required by the component. A class name alone does not create CSS, load an extension or implement an event handler.
Size	Options: Extra small (d-flex flex-wrap align-items-center gap-2 fs-xs text-body-secondary), Small (d-flex flex-wrap align-items-center gap-3 small text-body-secondary), Normal (d-flex flex-wrap align-items-center gap-3 text-body-secondary) Default: "d-flex flex-wrap align-items-center gap-3 small text-body-secondary".

Flex Flow

Name	Description
Direction	Chooses the main axis for children of a flex container. Horizontal lays them in a row; Vertical makes a column. Reversed variants reverse the visual direction without changing document or keyboard order. For a vertical menu, choose Vertical on its flex parent. Options: Horizontal (`flex-row`), Vertical (`flex-column`), Horizontal Reversed (`flex-row-reverse`), Vertical Reversed (`flex-column-reverse`).
Justify content	Distributes free space along the flex container’s main axis. With a horizontal row, Center centers the group horizontally and Space between places free space between children. With a column the main axis is vertical, so a visible difference requires spare height. It does not turn a normal block into a flex container. Options: Start (`justify-content-start`), Center (`justify-content-center`), End (`justify-content-end`), Space between (`justify-content-between`), Space around (`justify-content-around`).
Align items	Aligns children along the cross axis of a flex container. On a horizontal action row, Center aligns controls vertically; Baseline aligns their text baselines. Stretch expands eligible auto-sized children. It does not center the row itself in its parent. Options: Start (`align-items-start`), Center (`align-items-center`), End (`align-items-end`), Stretch (`align-items-stretch`), Baseline (`align-items-baseline`).
Wrap	Controls whether flex children may move onto additional lines. Wrap is useful for a button group on a narrow page; No Wrap can cause overflow when children cannot shrink. Wrap Reverse reverses the cross-axis stacking of lines, not the document’s reading order. Options: No Wrap (`flex-nowrap`), Wrap (`flex-wrap`), Wrap Reverse (`flex-wrap-reverse`).
Align content	Distributes multiple flex lines along the cross axis when wrapping has created more than one line and the container has spare space. It has no visible effect on a single-line flex container. For a wrapped tag region with a fixed height, Start packs the lines at the start. Options: Start (`align-content-start`), Center (`align-content-center`), End (`align-content-end`), Space between (`align-content-between`), Space around (`align-content-around`), Stretch (`align-content-stretch`).
Gap	Adds spacing between flex/grid children along both row and column axes. For example, gap-3 uses the theme’s spacer-3 value, normally 1rem. It adds no outer padding. In a Bootstrap column row, consider gutters instead: adding gaps to fixed column spans can make the row wrap. Options: Default (remove this override), 0.25rem (`gap-1`), 0.5rem (`gap-2`), 1rem (`gap-3`), 1.5rem (`gap-4`), 3rem (`gap-5`).
Row Gap	Sets spacing between rows/lines in the flex or grid layout. row-gap-3 normally gives 1rem between wrapped lines. It is separate from the horizontal spacing between items and from padding around the container. Theme customization can change the numeric spacer value. Options: Default (remove this override), 0.25rem (`row-gap-1`), 0.5rem (`row-gap-2`), 1rem (`row-gap-3`), 1.5rem (`row-gap-4`), 3rem (`row-gap-5`).
Column Gap	Sets spacing between columns/items in the flex or grid layout. column-gap-2 normally gives 0.5rem between items in a horizontal row. It does not add outer padding or change column width. Check the available width after increasing the gap. Options: Default (remove this override), 0.25rem (`column-gap-1`), 0.5rem (`column-gap-2`), 1rem (`column-gap-3`), 1.5rem (`column-gap-4`), 3rem (`column-gap-5`).

Appearance

Name	Description
Back Color	Sets the element’s background using Bootstrap theme utilities. bg-primary changes the background; text-bg-primary sets a primary background with a corresponding contrasting text color. For example, use text-bg-primary for a highlighted notice. Existing custom styles can override the utility. Options: Primary Contrast (text-bg-primary), Primary Background Only (bg-primary), Primary Subtle (bg-primary-subtle), Secondary Contrast (text-bg-secondary), Secondary Background Only (bg-secondary), Secondary Subtle (bg-secondary-subtle), Success Contrast (text-bg-success), Success Background Only (bg-success), Success Subtle (bg-success-subtle), Danger Contrast (text-bg-danger), Danger Background Only (bg-danger), Danger Subtle (bg-danger-subtle), Warning Contrast (text-bg-warning), Warning Background Only (bg-warning), Warning Subtle (bg-warning-subtle), Info Contrast (text-bg-info), Info Background Only (bg-info), Info Subtle (bg-info-subtle), Light Contrast (text-bg-light), Light Background Only (bg-light), Light Subtle (bg-light-subtle), Dark Contrast (text-bg-dark), Dark Background Only (bg-dark), Dark Subtle (bg-dark-subtle), Body (bg-body), Body Secondary (bg-body-secondary), Body Tertiary (bg-body-tertiary), White (bg-white), Transparent (bg-transparent). Default: no override from this control.
Back Opacity	Changes the opacity of a background color that uses --bs-bg-opacity. For example, bg-primary with bg-opacity-25 gives a 25% primary background while leaving text opaque. It does not fade a background image and is separate from the whole-element Opacity control. Options: Default, 10% (bg-opacity-10), 25% (bg-opacity-25), 50% (bg-opacity-50), 75% (bg-opacity-75), 100% (bg-opacity-100). Default: no override from this control.
Width	Sets a width utility relative to the containing block. For example, w-50 requests 50% of the parent’s width, while w-auto lets normal layout determine the width. This is different from a grid column span and from viewport width. Options: Auto (w-auto), 25% (w-25), 50% (w-50), 75% (w-75), 100% (w-100), Max 100% (mw-100). Default: no override from this control.
Height	Sets a height utility relative to the containing block. For example, h-100 requests the parent’s full height, which needs a resolvable parent height to have the intended effect. Use auto when the content should determine height. Options: Auto (h-auto), 25% (h-25), 50% (h-50), 75% (h-75), 100% (h-100), Max 100% (mh-100). Default: no override from this control.
Opacity	Fades the whole rendered element, including its text, background and descendants. For example, opacity-50 makes the entire card half opaque. Opacity zero still leaves layout space and does not by itself disable clicks or remove content from assistive technologies. Options: Default, 0% (opacity-0), 25% (opacity-25), 50% (opacity-50), 75% (opacity-75), 100% (opacity-100). Default: no override from this control.
Shadow	Applies or removes a Bootstrap box shadow. For example, shadow-sm gives a card the theme’s small shadow and shadow-none removes this utility’s shadow. The shadow does not allocate extra layout space; its appearance comes from the active theme variables. Options: Default, None (shadow-none), Small (shadow-sm), Regular (shadow), Large (shadow-lg). Default: no override from this control.
Object Fit	Controls how replaced content such as an image fits an explicitly sized box. object-fit-cover fills the box and may crop the image; object-fit-contain keeps the whole image visible and may leave space. It does not size the box or control CSS background images. Options: Default, Contain (object-fit-contain), Cover (object-fit-cover), Fill (object-fit-fill), Scale Down (object-fit-scale), None (object-fit-none). Default: no override from this control.
Viewport Size	Applies viewport-relative sizing utilities. For example, vh-100 requests the full viewport height, whereas min-vh-100 allows a section to grow taller than the viewport when its content requires it. These sizes are relative to the viewport, not the parent. Options: Default, Width 100vw (vw-100), Min-Width 100vw (min-vw-100), Height 100vh (vh-100), Min-Height 100vh (min-vh-100). Default: no override from this control.
Placeholder	Applies Bootstrap placeholder styling for a loading skeleton. The placeholder class supplies the visual block, and placeholder-glow or placeholder-wave adds the corresponding effect where supported. For example, use a placeholder span while a title loads. This styling does not fetch data or automatically replace itself with the loaded content. Options: None, This Element (placeholder), Container Glow (placeholder-glow), Container Wave (placeholder-wave). Default: no override from this control.

Spacing

Name	Description
Margin and Padding	Sets outer margin and inner padding utilities for the selected viewport breakpoint. For example, at MD, bottom margin 3 becomes mb-md-3; without a breakpoint, p-3 adds padding on every side. Start/End follow writing direction. The spacing scale comes from the project theme. Negative margin classes require a stylesheet built with negative-margin utilities enabled; the bundled default disables them. Options: mt-0, mt-1, mt-2, mt-3, mt-4, mt-5, mt-n1, mt-n2, mt-n3, mt-n4, mt-n5, mt-auto, mb-0, mb-1, mb-2, mb-3, mb-4, mb-5, mb-n1, mb-n2, mb-n3, mb-n4, mb-n5, mb-auto, ms-0, ms-1, ms-2, ms-3, ms-4, ms-5, ms-n1, ms-n2, ms-n3, ms-n4, ms-n5, ms-auto, me-0, me-1, me-2, me-3, me-4, me-5, me-n1, me-n2, me-n3, me-n4, me-n5, me-auto, mx-0, mx-1, mx-2, mx-3, mx-4, mx-5, mx-n1, mx-n2, mx-n3, mx-n4, mx-n5, mx-auto, my-0, my-1, my-2, my-3, my-4, my-5, my-n1, my-n2, my-n3, my-n4, my-n5, my-auto, m-0, m-1, m-2, m-3, m-4, m-5, m-n1, m-n2, m-n3, m-n4, m-n5, m-auto, pt-0, pt-1, pt-2, pt-3, pt-4, pt-5, pb-0, pb-1, pb-2, pb-3, pb-4, pb-5, ps-0, ps-1, ps-2, ps-3, ps-4, ps-5, pe-0, pe-1, pe-2, pe-3, pe-4, pe-5, px-0, px-1, px-2, px-3, px-4, px-5, py-0, py-1, py-2, py-3, py-4, py-5, p-0, p-1, p-2, p-3, p-4, p-5.
X Gutter	Sets the horizontal Bootstrap row gutter through a gx-* utility. For example, gx-3 changes the spacing between columns when applied to a Bootstrap row. It works through the row and column gutter rules; adding it to an unrelated element does not create a column layout. Options: 0 (gx-0), 1 (gx-1), 2 (gx-2), 3 (gx-3), 4 (gx-4), 5 (gx-5). Default: no override from this control.
Y Gutter	Sets the vertical Bootstrap row gutter through a gy-* utility. For example, gy-3 adds space between wrapped rows of columns. It does not replace padding inside a card or change the spacing of a non-grid element by itself. Options: 0 (gy-0), 1 (gy-1), 2 (gy-2), 3 (gy-3), 4 (gy-4), 5 (gy-5). Default: no override from this control.

Display

Name	Description
Hide on	Hides the element at selected viewport ranges by adding responsive display utilities. For example, hiding below MD produces d-none with a restoring display class at MD. The control uses the component’s normal display type when restoring it. This hides layout and content visually; it does not protect private data or stop a server endpoint being called. Options: Hide on mobile (xs), Hide on landscape mobile (sm), Hide on tablet (md), Hide on laptop (lg), Hide on desktop (xl), Hide on extra wide (xxl).
Print	Controls whether this element appears in printed output. Hide writes d-print-none. Show restores the component’s display type for print, such as d-print-block or d-print-table-row. For example, hide a navigation bar when printing a report. Check browser print preview because screen layout alone does not show this setting. Options: Show (d-print-block), Hide (d-print-none).
Visually Hidden	Adds visually-hidden: content remains available to assistive technologies while it is visually clipped. Use it for an accessible label that should not appear on screen, not for hiding private data. It is different from display:none, which also removes the element from layout and generally from the accessibility tree. Default: off.
Focusable	Adds visually-hidden-focusable, which hides the element until it or a descendant receives focus. A skip link is a typical example. The element must already be focusable, such as an anchor with href; this class does not add keyboard focusability. Do not combine it with an unconditional visually-hidden class, which would keep it hidden even when focused. Default: off.

Check your result

You can select a setting, apply its documented value and check the relevant effect on the page.