Toasts — Reference

Toasts

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

Bootstrap 5 Toasts Properties

Name	Description
ID	ID for the toast container. Sets the toast container id . Useful for targeting and scripting, especially when using multiple toast containers. Bootstrap docs: Toasts Required. Default: "". Attribute: id.
Position	Position of the toast container. Controls where the toast container is placed on screen. Bootstrap commonly positions toasts using utility classes and a positioned container. Bootstrap docs: Placement Options: Top, Bottom (bottom) Default: "". Attribute: position.
Align	Align items inside the toast container. Controls alignment within the toast container. This usually maps to flex utilities (alignment and justification) for the toast stack. Bootstrap docs: Flex Options: Right, Left (left) Default: "". Attribute: align.
Offset X	Horizontal offset for positioning. Adjusts the toast container horizontal offset. Use this when you need spacing from viewport edges beyond standard Bootstrap spacing utilities. Bootstrap docs: Spacing Default: "15". Attribute: offset-x.
Offset Y	Vertical offset for positioning. Adjusts the toast container vertical offset. Use this when you need spacing from viewport edges beyond standard Bootstrap spacing utilities. Bootstrap docs: Spacing Default: "15". Attribute: offset-y.
Min Width	Minimum toast width. Sets a minimum width for the toast UI. Useful to prevent very narrow toasts when the content is short. Bootstrap docs: Toasts Default: "240". Attribute: min-width.
Max Width	Maximum toast width. Sets a maximum width for the toast UI. Useful to keep longer messages readable and prevent oversized toasts. Bootstrap docs: Toasts Default: "350". Attribute: max-width.
Delay	Auto-hide delay (ms). Controls the toast auto-hide delay. This maps to the Bootstrap toast delay option. Bootstrap docs: Options Default: "5000". Attribute: delay.

Show: Toast Properties

Name	Description
Message	Enter the message text Defines the main popover body content. You can enter static text or bind a value to show dynamic content (for example: details for a record or field). Bootstrap docs: Popovers Required. Default: "".
Header Class	Class for the header Adds extra CSS classes to the toast header. Use utilities (spacing/colors/typography) or custom classes. Bootstrap docs: Utilities API Default: "".
Body Class	Class for the body Adds extra CSS classes to the toast body. Useful for spacing, text utilities, and custom layout. Bootstrap docs: Spacing Default: "".
Delay	Enter the message delay Adds a delay (in milliseconds) before showing or hiding the popover. This can improve usability by preventing accidental popovers when users briefly hover or focus an element. Bootstrap docs: Popover options Default: "5000".
Closable	Make the toast closable Adds the close button and makes the alert dismissible. This enables the required Bootstrap classes/attributes so the built-in JavaScript can hide the alert when the user clicks the dismiss control. Bootstrap docs: Dismissing alerts Default: true.
Auto Hide	Hide the toast automatically after the delay expires When enabled, the toast hides automatically after the configured delay. Disable this for persistent notifications that must be dismissed manually by the user. Bootstrap docs: Toast options Default: true.
Animation	Show the toast with animation Enables or disables the toast animation when showing/hiding. Disable it if you need instant display changes or want to reduce motion. Bootstrap docs: Toasts Default: true.
Use HTML	Use HTML in the message text When enabled, the popover content is treated as HTML instead of plain text. Only use this with trusted content to avoid XSS. Prefer plain text for user-provided values. Bootstrap docs: Popover options Default: false.

Show: Title Properties

Name	Description
Title	Enter the message title Defines the popover title shown in the header area. Use a short heading that helps users understand what the popover content is about. Bootstrap docs: Popovers Default: "".
Sub Title	Enter the message sub title Sets secondary header text (often used for timestamps). Keep it short so the header remains readable. Bootstrap docs: Toasts Default: "".
Icon	Enter the title icon Sets the icon shown in the toast header (if supported by the template). Use small, recognizable icons to reinforce message type. Bootstrap docs: Toasts Default: "".

Show Simple: Toast Properties

Name	Description
Message	Enter the message text Defines the main popover body content. You can enter static text or bind a value to show dynamic content (for example: details for a record or field). Bootstrap docs: Popovers Required. Default: "".
Delay	Enter the message delay Adds a delay (in milliseconds) before showing or hiding the popover. This can improve usability by preventing accidental popovers when users briefly hover or focus an element. Bootstrap docs: Popover options Default: "5000".
Type	Toast style variant. Selects a contextual style for the toast (using Bootstrap utilities/classes). Common use: apply background/text utilities to indicate success/warning/error. Bootstrap docs: Toasts Options: None, Primary ('primary'), Secondary ('secondary'), Success ('success'), Danger ('danger'), Warning ('warning'), Info ('info'), Light ('light'), Dark ('dark') Default: "".
Closable	Make the toast closable Adds the close button and makes the alert dismissible. This enables the required Bootstrap classes/attributes so the built-in JavaScript can hide the alert when the user clicks the dismiss control. Bootstrap docs: Dismissing alerts Default: true.
Auto Hide	Hide the toast automatically after the delay expires When enabled, the toast hides automatically after the configured delay. Disable this for persistent notifications that must be dismissed manually by the user. Bootstrap docs: Toast options Default: true.
Animation	Show the toast with animation Enables or disables the toast animation when showing/hiding. Disable it if you need instant display changes or want to reduce motion. Bootstrap docs: Toasts Default: true.
Use HTML	Use HTML in the message text When enabled, the popover content is treated as HTML instead of plain text. Only use this with trusted content to avoid XSS. Prefer plain text for user-provided values. Bootstrap docs: Popover options Default: false.