Modal: Reference
Reference for Modal in Web Framework References. Key properties: ID, Class, Size, Fullscreen.
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
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 |
| button_group | ||
| Visually Hidden | boolean | |
| Focusable | boolean |