With BootstrapGrid container widget, you can create multiple bootstrap rows, columns and place controls within each column as shown in the below graphic. In v9.12 you can place sub-forms within each bootstrap column.
Let’s build and execute the BootstrapGridDef example.
- Create a new form definition called “BootstrapGridDef”
- Select the Open Designer checkbox and click the “Create” button
- Drag a Bootstrapgrid widget to the canvas
- Double-click on the widget to configure the inputs as shown in the below graphic
- Click on the Background drop-down and select the color from the palette.
- Click on the Add Row button to add the row before /after the mouse cursor selection
- Click on the Add Column button to add the column before/after the mouse cursor selection.
- Click on Save button and Close the popup window
- Navigate to UI menu and Preview the form. The rendered widget will look as shown in the below graphic
- With BootstrapGrid container widget, you can add a line widget as a separator between rows to improve the aesthetic appeal. The form design view and the rendered view is as shown below.
- In v9.12 the bootstrap grid view supports the background color and column content alignment