Alert: Reference

Awesome static or dynamic alerts for your website. Enhance users’ experience by integrating alerts on your site! Thanks to the world’s most popular CSS framework, alerts are fully responsive and will significantly help you in communicating with your users! Bootstrap 5 component. Add the component and configure its properties in the Inspector.

Inspector Property Groups

Alert Properties

Property	Type	Details
ID	text	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 Attribute: id
Class	text	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 Attribute: class
Fade	boolean	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
Auto Show	boolean	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 Attribute: show
Closable	boolean	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 Attribute: closable
Type	colorlist	Alert contextual style. Selects the alert contextual color (e.g. primary, success, danger). This maps to Bootstrap .alert-* classes. Bootstrap docs: Alert examples Attribute: type Options: Primary, Secondary, Success, Danger, Warning, Info

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 Alert

Hide

Hide the Alert

Toggle

Toggle the Alert

Set Alert Type

Set Alert Type

Configuration group	Controls
Set Alert Type Properties	Alert Type

Set Text Content

Set Text Content of the Alert

Configuration group	Controls
Set Text Content Properties	Value

Dynamic Attributes

Alert Show

Fires before the alert starts to show.

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

Dynamic Events

Show

Fires before the alert starts to show.

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

Shown

Fires after the alert is shown.

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

Hide

Fires before the alert starts to hide.

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

Hidden

Fires after the alert is hidden.

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