Dynamic Collapse — Reference

Dynamic Collapse

Bootstrap 5 component. Add the component and configure its properties in the Inspector.

Dynamic Collapse Properties

Name	Description
ID	Optional unique identifier for this element. Sets the element's id attribute. Keep IDs unique per page (useful for anchors, label for targets, and JavaScript hooks). Bootstrap docs: Introduction Default: "". Attribute: id.
Class	Adds raw class names to the element. Adds text directly to the class attribute. Use this for custom utility classes or project-specific overrides. Separate multiple classes with spaces. Bootstrap docs: Utilities API Default: "". Attribute: class.
Show	Initial collapsed state. Controls the initial state of the collapse element. When enabled, the collapse starts expanded by adding show to the collapse element. Bootstrap docs: Collapse Default: false. Attribute: show.
Parent	Accordion parent selector. Enables accordion behavior by setting data-bs-parent . When set, only one collapse item inside the parent stays open at a time (opening one closes the others). Bootstrap docs: Accordion example Options: None Default: "". Attribute: data-bs-parent.

Text

Name	Description
Advanced	Advanced layout options. Advanced layout options provided by the rule. These typically map to Bootstrap utility classes (spacing, flex, display) to fine-tune layout. Bootstrap docs: Utilities API
Color	Options: Primary (text-primary), Primary Emphasis (text-primary-emphasis), Secondary (text-secondary), Secondary Emphasis (text-secondary-emphasis), Success (text-success), Success Emphasis (text-success-emphasis), Danger (text-danger), Danger Emphasis (text-danger-emphasis), Warning (text-warning), Warning Emphasis (text-warning-emphasis), Info (text-info), Info Emphasis (text-info-emphasis), Light (text-light), Light Emphasis (text-light-emphasis), Dark (text-dark), Dark Emphasis (text-dark-emphasis), Body (text-body), Body Emphasis (text-body-emphasis), Body Secondary (text-body-secondary), Body Tertiary (text-body-tertiary), Black (text-black), White (text-white), Black 50 (text-black-50), White 50 (text-white-50), Muted (deprecated) (text-muted) Default: "".
Text Opacity	Options: Default, 25% (text-opacity-25), 50% (text-opacity-50), 75% (text-opacity-75), 100% (text-opacity-100) Default: "".
Align	Controls text alignment. Controls text alignment using Bootstrap text utilities. Applies classes like text-start , text-center , text-end , including responsive variants (e.g. text-md-center ). Bootstrap docs: Text utilities Options: Start (text-start), Center (text-center), End (text-end) Default: "".
Font Weight	Controls font weight. Controls font weight using Bootstrap font-weight utilities. Applies fw-light , fw-normal , fw-bold , etc. Bootstrap docs: Font weight Options: Bold (fw-bold), Bolder (fw-bolder), Normal (fw-normal), Light (fw-light), Lighter (fw-lighter)
Line Height	Controls line height. Controls line height using Bootstrap line-height utilities. Applies lh-1 , lh-sm , lh-base , or lh-lg . Bootstrap docs: Line height Options: 1 (lh-1), Small (lh-sm), Base (lh-base), Large (lh-lg)
Font Style	Controls font style. Controls font style using Bootstrap font-style utilities. Applies utilities such as fst-italic and fst-normal when available. Bootstrap docs: Font style Options: Italic (fst-italic), Mark (mark), Lead (lead), Small (small), Monospace (font-monospace), Abbreviation (initialism)
Transform	Controls letter casing. Controls letter casing using Bootstrap text transform utilities. Applies text-lowercase , text-uppercase , or text-capitalize . Bootstrap docs: Text transform Options: Uppercase (text-uppercase), Capitalize (text-capitalize), Lowercase (text-lowercase) Default: "".
Overflow	Controls text overflow behavior. Controls text overflow behavior. Depending on the rule, this may apply text-truncate (requires constrained width) or other overflow helpers. Bootstrap docs: Text truncation Options: Prevent wrapping (text-nowrap), Truncate text with an ellipsis (text-truncate), Word Break (text-break) Default: "".

Appearance

Name	Description
Back Color	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: "".
Back Opacity	Controls background opacity. Controls background opacity when using background color utilities. Applies classes like bg-opacity-25 , bg-opacity-50 , etc. Bootstrap docs: Background utilities Options: Default, 10% (bg-opacity-10), 25% (bg-opacity-25), 50% (bg-opacity-50), 75% (bg-opacity-75), 100% (bg-opacity-100) Default: "".
Width	Sets a Bootstrap width utility class. Sets a Bootstrap width utility class. Applies utilities like w-25 , w-50 , w-75 , w-100 , or w-auto . Bootstrap docs: Sizing Options: Auto (w-auto), 25% (w-25), 50% (w-50), 75% (w-75), 100% (w-100), Max 100% (mw-100) Default: "".
Height	Sets a Bootstrap height utility class. Sets a Bootstrap height utility class. Applies utilities like h-25 , h-50 , h-75 , h-100 , or h-auto . Bootstrap docs: Sizing Options: Auto (h-auto), 25% (h-25), 50% (h-50), 75% (h-75), 100% (h-100), Max 100% (mh-100) Default: "".
Opacity	Sets the opacity utility class. Sets an opacity utility class. Applies utilities such as opacity-25 , opacity-50 , opacity-75 , or opacity-100 . Bootstrap docs: Opacity Options: Default, 0% (opacity-0), 25% (opacity-25), 50% (opacity-50), 75% (opacity-75), 100% (opacity-100) Default: "".
Shadow	Applies a Bootstrap shadow utility. Applies a Bootstrap shadow utility. Uses classes like shadow , shadow-sm , shadow-lg , or removes shadow with shadow-none . Bootstrap docs: Shadows Options: Default, None (shadow-none), Small (shadow-sm), Regular (shadow), Large (shadow-lg) Default: "".
Object Fit	Options: Default, Contain (object-fit-contain), Cover (object-fit-cover), Fill (object-fit-fill), Scale Down (object-fit-scale), None (object-fit-none) Default: "".
Viewport Size	Options: Default, Width 100vw (vw-100), Min-Width 100vw (min-vw-100), Height 100vh (vh-100), Min-Height 100vh (min-vh-100) Default: "".
Placeholder	Placeholder styling utility. Controls placeholder-style appearance when supported by the rule/component. Use this for skeleton/loading placeholders or muted placeholder presentation depending on the component. Bootstrap docs: Placeholders Options: None, This Element (placeholder), Container Glow (placeholder-glow), Container Wave (placeholder-wave) Default: "".

Border

Name	Description
Border	Options: All (border), None (border-0), Top (border-top), End (border-end), Bottom (border-bottom), Start (border-start), No Top (border-top-0), No End (border-end-0), No Bottom (border-bottom-0), No Start (border-start-0) Default: "".
Width	Controls border width. Controls border width using Bootstrap border utilities. This applies classes like border , border-2 , border-3 , etc. Bootstrap docs: Border width Options: Default, 1px (border-1), 2px (border-2), 3px (border-3), 4px (border-4), 5px (border-5) Default: "".
Rounded	Options: Default, All (rounded), None (rounded-0), Top (rounded-top), End (rounded-end), Bottom (rounded-bottom), Start (rounded-start), Circle (rounded-circle), Pill (rounded-pill) Default: "".
Radius	Options: Default, Small (rounded-1), Medium (rounded-2), Large (rounded-3), X-Large (rounded-4), XX-Large (rounded-5) Default: "".
Border Color	Options: Default, Primary (border-primary), Primary Subtle (border-primary-subtle), Secondary (border-secondary), Secondary Subtle (border-secondary-subtle), Success (border-success), Success Subtle (border-success-subtle), Danger (border-danger), Danger Subtle (border-danger-subtle), Warning (border-warning), Warning Subtle (border-warning-subtle), Info (border-info), Info Subtle (border-info-subtle), Light (border-light), Light Subtle (border-light-subtle), Dark (border-dark), Dark Subtle (border-dark-subtle), Black (border-black), White (border-white) Default: "".

Spacing

Name	Description
Margin<br>&<br>Padding	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	Horizontal gutter size. Sets the horizontal gutter (spacing between columns). Uses gx-* utilities to control the horizontal gutter size. Bootstrap docs: Gutters Options: 0 (gx-0), 1 (gx-1), 2 (gx-2), 3 (gx-3), 4 (gx-4), 5 (gx-5) Default: "".
Y Gutter	Vertical gutter size. Sets the vertical gutter (spacing between rows). Uses gy-* utilities to control the vertical gutter size. Bootstrap docs: Gutters Options: 0 (gy-0), 1 (gy-1), 2 (gy-2), 3 (gy-3), 4 (gy-4), 5 (gy-5) Default: "".

Display

Name	Description
Hide on	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	Options: Show (d-print-block), Hide (d-print-none)
Visually Hidden	Default: false.
Focusable	Default: false.

Dynamic attributes

Name	Description
Collapse Show	Choose dynamic data binding. Output value representing the shown state. This is typically used for App Connect state binding and logic, not for styling. Bootstrap docs: JavaScript

Dynamic events

Name	Description
Show	Action: Choose the action to execute. Output value representing the shown state. This is typically used for App Connect state binding and logic, not for styling. Bootstrap docs: JavaScript
Shown	Action: Choose the action to execute. Output value set after the component is fully shown (after animation completes if enabled). Use this when you need a “shown” signal that implies the UI is visible. Bootstrap docs: JavaScript
Hide	Action: Choose the action to execute. Output value representing the hidden state. This is typically used for App Connect state binding and logic. Bootstrap docs: JavaScript
Hidden	Action: Choose the action to execute. Output value set after the component is fully hidden (after animation completes if enabled). Use this as a reliable “hidden” signal for cleanup and follow-up actions. Bootstrap docs: JavaScript