Dynamic Modal — Reference

Dynamic Modal

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

Dynamic Modal Properties

Name	Description
ID	ID for the modal. Sets the modal container id . Use this id from triggers (buttons/links) via data-bs-target / href so Bootstrap can open the correct modal instance. Bootstrap docs: Modal Default: "". Attribute: id.
Class	Extra classes for the modal. Adds extra CSS classes to the modal container. Use this for custom utility classes (spacing, colors) or your own project styles without editing the component markup. Bootstrap docs: Introduction Default: "". Attribute: class.
Size	Modal dialog size. Controls the modal dialog size. This applies Bootstrap sizing classes such as modal-sm , modal-lg , or modal-xl on the dialog element. Bootstrap docs: Modal sizes Options: Default, Small (modal-sm), Large (modal-lg), Extra Large (modal-xl) Default: "".
Fullscreen	Fullscreen modal behavior. Makes the modal fullscreen (always or responsive). This applies modal-fullscreen or a responsive variant like modal-fullscreen-md-down , so the dialog expands to the viewport. Bootstrap docs: Fullscreen modal Options: Default, Always (modal-fullscreen), Below 576px (modal-fullscreen-sm-down), Below 768px (modal-fullscreen-md-down), Below 992px (modal-fullscreen-lg-down), Below 1200px (modal-fullscreen-xl-down), Below 1400px (modal-fullscreen-xxl-down) Default: "".
Centered	Vertically center the modal. Vertically centers the modal dialog in the viewport. This applies modal-dialog-centered to the dialog element. Bootstrap docs: Vertically centered Default: false.
Fade	Fade animation. Enables the fade animation for showing/hiding the modal. This adds the fade class so Bootstrap animates the transition. Disable it when you want instant visibility changes. Bootstrap docs: Modal animation Default: false.
Scrollable	Scrollable modal body. Makes the modal body scrollable while keeping the header/footer fixed. This applies modal-dialog-scrollable , which is useful for long content without growing the modal beyond the viewport. Bootstrap docs: Scrolling long content Default: false.
Auto Show	Initial visibility of the modal. Controls whether the modal is initially shown. In most cases modals start hidden and are opened by triggers or programmatic actions. Bootstrap docs: Modal Default: false. Attribute: show.
No Backdrop	Disables the backdrop overlay. Disables the modal backdrop overlay. Without a backdrop, users can interact with the page behind the modal, which may not be desirable for critical dialogs. Bootstrap docs: Backdrop Default: false. Attribute: nobackdrop.
No Close On Click	Do not close when clicking backdrop. Prevents closing the modal when the user clicks the backdrop. This corresponds to using a static backdrop behavior. Bootstrap docs: Static backdrop Default: false. Attribute: nocloseonclick.
No Keyboard	Disables closing via Escape key. Prevents closing the modal with the Escape key. Use carefully; users generally expect Escape to close dialogs. Bootstrap docs: Keyboard Default: false. Attribute: nokeyboard.
No Focus	Disables focus enforcement. Disables Bootstrap's focus enforcement inside the modal. Use this only if you have embedded widgets that require focus outside the modal; otherwise it can reduce accessibility. Bootstrap docs: Options Default: false. Attribute: nofocus.

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
Modal 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