Dynamic Modal: Reference

Modern dialog boxes and popup windows for your website. Modals are a part of Bootstrap 5 framework and they’re the easiest way to tell your users something important, let them like your Facebook page, subscribe for updates… any content you need! Bootstrap 5 component. Add the component and configure its properties in the Inspector.

Inspector Property Groups

Dynamic Modal Properties

Property	Type	Details
ID	text	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 Attribute: id
Class	text	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 Attribute: class
Size	droplist	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, Large, Extra Large
Fullscreen	droplist	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, Below 576px, Below 768px, Below 992px, Below 1200px
Centered	boolean	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
Fade	boolean	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

Text

Property	Type	Details
Advanced	css_toggle	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	color_group	Options: text-primary, text-primary-emphasis, text-secondary, text-secondary-emphasis, text-success, text-success-emphasis
Text Opacity	range
Align	button_group	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: text-start, text-center, text-end
Font Weight	button_group	Controls font weight. Controls font weight using Bootstrap font-weight utilities. Applies fw-light , fw-normal , fw-bold , etc. Bootstrap docs: Font weight Options: B, B+, N, L, L+
Line Height	button_group	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, SM, BS, LG

Appearance

Property	Type	Details
Back Color	color_group	Options: text-bg-primary, bg-primary, bg-primary-subtle, text-bg-secondary, bg-secondary, bg-secondary-subtle
Back Opacity	range	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
Width	range	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
Height	range	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
Opacity	range	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
Shadow	droplist	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, Small, Regular, Large

Border

Property	Type	Details
Border	enum	Options: All, None, Top, End, Bottom, Start
Width	range	Controls border width. Controls border width using Bootstrap border utilities. This applies classes like border , border-2 , border-3 , etc. Bootstrap docs: Border width
Rounded	droplist	Options: Default, All, None, Top, End, Bottom
Radius	droplist	Options: Default, Small, Medium, Large, X-Large, XX-Large
Border Color	colorlist	Options: Default, Primary, Primary Subtle, Secondary, Secondary Subtle, Success

Spacing

Property	Type	Details
Margin<br>&<br>Padding	spacing
X Gutter	range	Horizontal gutter size. Sets the horizontal gutter (spacing between columns). Uses gx-* utilities to control the horizontal gutter size. Bootstrap docs: Gutters
Y Gutter	range	Vertical gutter size. Sets the vertical gutter (spacing between rows). Uses gy-* utilities to control the vertical gutter size. Bootstrap docs: Gutters

Display

Property	Type	Details
Hide on	button_group	Options: xs, sm, md, lg, xl, xxl
Print	button_group
Visually Hidden	boolean
Focusable	boolean

Actions

Show

Show the Modal

Hide

Hide the Modal

Toggle

Toggle the Modal

Update

Update the Modal

Dynamic Attributes

Modal Show

Fires before the modal starts to show.

Attribute property	Type	Details
When:	text	Choose dynamic data binding.

Dynamic Events

Show

Fires before the modal starts to show.

Event option	Type	Details
Action:	text	Choose the action to execute.

Shown

Fires after the modal is shown.

Event option	Type	Details
Action:	text	Choose the action to execute.

Hide

Fires before the modal starts to hide.

Event option	Type	Details
Action:	text	Choose the action to execute.

Hidden

Fires after the modal is hidden.

Event option	Type	Details
Action:	text	Choose the action to execute.