Alert — Reference

Alert

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

Alert Properties

Name	Description
ID	ID for the alert element. Sets the alert container id . Use it to target the alert from scripts or anchors, or when you need a stable selector. Bootstrap docs: Alerts Default: "". Attribute: id.
Class	Extra classes for the alert. Adds extra CSS classes to the alert container. Use this for custom styling or additional Bootstrap utilities. Bootstrap docs: Utilities API Default: "". Attribute: class.
Fade	Enables fade animation. Enables the fade transition when the alert is shown/hidden. This uses Bootstrap's transition classes ( .fade and .show ). Bootstrap docs: Dismissing Default: false.
Auto Show	Controls whether the alert is shown. Controls initial visibility of the alert. For dismissible alerts, you can also programmatically show/hide based on App Connect logic. Bootstrap docs: Alerts Default: false. Attribute: show.
Closable	Makes the alert dismissible. Adds dismiss (close) behavior to the alert. Bootstrap uses a close button and JavaScript behavior to remove/hide the alert. Bootstrap docs: Dismissing Default: false. Attribute: closable.
Type	Alert contextual style. Selects the alert contextual color (e.g. primary, success, danger). This maps to Bootstrap .alert-* classes. Bootstrap docs: Alert examples Options: Primary, Secondary (secondary), Success (success), Danger (danger), Warning (warning), Info (info), Light (light), Dark (dark) Default: "". Attribute: type.

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.

Set Alert Type

Name	Description
Alert Type	Set map type Options: Primary, Secondary ('secondary'), Success ('success'), Danger ('danger'), Warning ('warning'), Info ('info'), Light ('light'), Dark ('dark') Default: "".

Set Text Content

Name	Description
Value	Enter the value Required. Default: "".

Dynamic attributes

Name	Description
Alert 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