--- title: "Bootstrap Wrapper Control" slug: "bootstrap-wrapper-control" updated: 2025-12-09T18:09:31Z published: 2025-12-09T18:09:31Z canonical: "docs.processmaker.com/bootstrap-wrapper-control" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.processmaker.com/llms.txt > Use this file to discover all available pages before exploring further. # Bootstrap Wrapper Control Bootstrap wrapper controls enable users to group multiple controls into a single, collapsible container, which helps save space on a form. This feature is particularly useful for organizing complex forms, improving readability, and enhancing user experience by allowing sections of the form to be expanded or collapsed as needed. > This control is only available for Form-type Screens. See [Screen Types](/v1/docs/screens#screen-types). Watch the following product tour to learn how to use a Bootstrap Wrapper control. [Embedded content](https://cdn.iframe.ly/aQBHWA5) --- ## Add the Control to a Screen **Permissions** Your user account or group membership must have the following permissions to design a Screen unless your user account has the **Make this user a Super Admin** setting selected: - Screens: Edit Screens - Screens: View Screens See the [Screens](/v1/docs/permission-descriptions-for-users-and-groups#screens) permissions or ask your Administrator for assistance. Follow these steps to add this control to the Screen: 1. [Create a new Form-type Screen](/v1/docs/create-a-new-screen) or [edit an existing one.](/v1/docs/manage-screens#edit-a-screen) 2. From the Controls Menu on the left, expand the **Advanced** category, and then locate the **Bootstrap Wrapper** icon ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/d75c327e-a139-4ef5-bad0-ec0df990c3a3.png). 3. Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/b587d4bd-e283-40bb-b4aa-7981f620c3af.png) 4. Configure the Bootstrap Wrapper control. See [Settings](/v1/docs/bootstrap-wrapper-control#settings). 5. Validate that the control is configured correctly. See [Validate Your Screen](/v1/docs/validate-and-publish-a-screen#validate-a-processmaker-screen). --- ## Settings The Image control has the following panels that contain settings: - [**Variable** panel](/v1/docs/bootstrap-wrapper-control#variable-panel-settings) - [**Configuration** panel](/v1/docs/bootstrap-wrapper-control#configuration-panel-settings) - [**Advanced** panel](/v1/docs/bootstrap-wrapper-control#advanced-panel-settings) --- ### Variable Panel Settings Expand the **Variable** panel from the Properties Panel on the right to configure the following properties: #### Variable Name Edit the default **Variable Name** setting value for this control if necessary. The **Variable Name** setting value represents data in this control during Requests. Ensure that the **Variable Name** setting value is a unique name from other controls in this [Screen](/v1/docs/screens) and contains at least one letter. This is a required setting. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/d352722a-cc41-4aee-a216-16ba467d381e.png) Use the **Variable Name** setting value in the following ways: - Reference this control by its **Variable Name** setting's value. The **Data Preview** panel in Preview mode represents the state of the Bootstrap Component control using its **Variable Name** value in the Request's JSON data model. - Reference this control's value in a different Screen Builder control. To do so, use [mustache syntax](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/mustache.5(1).html) and reference this control's **Variable Name** value in the target control. Example: `{{ b_wrapper_component_1 }}`. - Reference this value in [**Visibility Rule** setting expressions](/v1/docs/bootstrap-wrapper-control#visibility-rule). See [best practices](/v1/docs/screen-design-best-practices#naming-request-variables-for-screen-controls) when editing a Request variable name. #### Label Edit the default label that displays for this control if necessary. **New Bootstrap Wrapper** is the default value. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/996def5d-3e72-492d-a78c-9f010e5bcb3a.png) --- ### Configuration Panel Settings Expand the **Configuration** panel from the Properties Panel on the right to configure the following properties: #### BootstrapVue Component In the **Bootstrap vue component** setting, select one of the following components: [Alert](https://bootstrap-vue.org/docs/components/alert) [Card](https://bootstrap-vue.org/docs/components/card) [Collapse](https://bootstrap-vue.org/docs/components/collapse) [Jumb](https://bootstrap-vue.org/docs/components/jumbotron)[otron](https://bootstrap-vue.org/docs/components/modal) [Modal](https://bootstrap-vue.org/docs/components/modal) The **Modal** setting is selected by default. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/78115b51-a702-4636-b111-2c94aff93985.png) #### Page In the **page** setting, select a [page created](/v1/docs/add-delete-or-rename-a-page#add-a-new-page-to-a-screen) in the same Screen to use in the component selected previously. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/b73fb24b-fbc1-4d2d-bdc4-4423a09b3434.png) #### Component Configuration In the **Config** setting, enter component BootstrapVue properties in JSON format. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/e5d6e86e-24b6-4987-b35f-256273473f54.png) Refer to the following BootstrapVue documentation for property descriptions for each available wrap component: [Alert](https://bootstrap-vue.org/docs/components/alert#comp-ref-b-alert-props) [Card](https://bootstrap-vue.org/docs/components/card#comp-ref-b-card-props) [Collapse](https://bootstrap-vue.org/docs/components/collapse#comp-ref-b-collapse-props) [Jumbotron](https://bootstrap-vue.org/docs/components/jumbotron#comp-ref-b-jumbotron-props) [Modal](https://bootstrap-vue.org/docs/components/modal#comp-ref-b-modal-props) For example, when using the Model component, the following properties can be configured: ```plaintext {    "ok-title":"Back to Form",    "size":"lg" } ``` --- ### [](/docs/bootstrap-wrapper-control#advanced-panel-settings)Advanced Panel Settings Expand the **Advanced** panel from the Properties Panel on the right to configure the following properties: #### Visibility Rule Specify an expression that indicates the condition(s) under which this control displays. See [Expression Syntax Components](/v1/docs/feel-expression-syntax#show-or-hide-screen-builder-controls). If this setting does not have an expression, then this control displays by default. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/dd9548bd-e7c1-4a03-836a-8882bfa0e7af.png) For example, this control displays if the variable value **tip** is **1**. For a detailed example of the Visibility Rule setting, see [Show or Hide Controls Based on Button Selection](/v1/docs/example-show-or-hide-controls-based-on-button-selection). Note the following regarding how to use visibility rules: - To make this control hidden until another control contains a value, enter the **Variable Name** setting value of that control to this control's **Visibility Rule** setting. - [Visibility rules override custom CSS settings](/v1/docs/screen-design-best-practices#visibility-rules-override-custom-css-settings). #### Device Visibility Select on which device types this control displays: - **Desktop:** The control displays only on desktop devices. Enable the **Show for Desktop** toggle key. - **Mobile:** The control displays only on mobile devices. Enable the **Show for Mobile** toggle key. - **Both:** The control displays on both desktop and mobile devices. Both toggle keys are enabled by default. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/1f7b7bab-8541-4be1-9395-ad03727b6630.png) #### CSS Selector Name Enter the value to represent this control in custom CSS syntax when in [Custom CSS](/v1/docs/custom-css#add-custom-css-to-a-processmaker-screen) mode. As a best practice, use the same **CSS Selector Name** value on different controls of the same type to apply the same custom CSS style to all those controls. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/d92587b8-fb1d-4cf9-bc92-da4b19de54b3.png) Then, use this name in the [Custom CSS](/v1/docs/custom-css#apply-css-to-specific-processmaker-screen-controls) feature to apply CSS styling to this control as follows: ```plaintext [selector='Submit Form'] {    color: blueviolet; } ``` - [Editing a CSS name to represent this control in custom CSS syntax](/v1/docs/screen-design-best-practices#css-selector-naming-best-practice) - [Visibility rules override custom CSS settings](/v1/docs/screen-design-best-practices#visibility-rules-override-custom-css-settings)