Bootstrap 12-Grid

Bootstrap 12-Grid Layout

Overview

This is the bootstrap 12 grid layout package for making responsive forms. It is meant to work with the bootstrap components package or any other compatible component packages. You can build a responsive layout for your form using this combination or components and layouts. 12grid is based on bootstrap grid system, see https://getbootstrap.com/docs/5.0/layout/grid/ for more details.

See below the Layout Containers which can be found within the Bootstrap 12-Grid Layout package:

Container

Container, based on the Bootstrap Container is used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container.

Constraints : A Container can be dropped only at the root of the form layout and can contain only Row, therefore you will be allowed to drag & drop into it only Row layout or templates starting with rows (e.g. Row and 1 Column, Label and Field...).

Create a Container

These are the steps for creating a Container:

1. Open the Form Editor of your responsive form

2. Find Container in Bootstrap 12-Grid section of the components' pallet

3. Drag and drop the Container component in the form

4. Add at least one Row component

Row

Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side. Rows also support modifier classes to uniformly apply column sizing and gutter classes to change the spacing of your content.

Constraints : A row can contain only Column containers.

Create a Row

These are the steps for creating a Row:

1. Open the Form Editor of your responsive form

2. Find Row in Bootstrap 12-Grid section of the components' pallet

3. Drag and drop the Row component in:

   • empty space of the form, as an independent component

   • inside a Container component

   • inside a Column component

4. Add at least one Column component

Column

Columns are at the core of the 12 Grid Layout system. Nested within Row containers, they can divide the parent row's width to up 12 blocks of same relative size, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., col-4 spans four). widths are set in percentages so you always have the same relative sizing.

Constraints : A column can contain any component and any layout containers except for Container, Column or Flex Item.

Can nest rows into a column to further organize the layout:

Create a Column

These are the steps for creating a Column:

1. Open the Form Editor of your responsive form

2. Find Column in Bootstrap 12-Grid section of the components' pallet

3. Drag and drop the Column component in a Row component

4. Add other needed components inside the Column, except for Container, Column or Flex Item

Bootstrap 12-Grid Layout Templates

The following are ready to use layout templates based on the 12 Grid Layout.

Row-With-Column

A quick start for a 12 Grid layout. These 3 templates Row with 1 Column, Row with 2 Columns, Row with 3 Columns are row layout containing already 1, 2 or 3 equally sized columns.

Create a Row-With-Column

These are the steps for creating a Row-With-Column:

1. Open the Form Editor of your responsive form

2. Find Row with 1 Column / Row with 2 Columns / Row with 3 Columns in the Bootstrap 12-Grid section of the components' pallet

3. Drag and drop the component in:

   • empty space of the form, as an independent component

   • inside a Container component

   • inside a Column component

4. Add other needed components inside the Column, except for Container, Column or Flex Item, even other columns inside the row, if needed

Label-And-Field

A predefined template which comes with a row and 2 columns ( md-4 and md-8 ) having a Label component in the first column and a Textbox component in the second column.

Create a Label-And-Field

These are the steps for creating a Label-And-Field:

1. Open the Form Editor of your responsive form

2. Find Label-And-Field in Templates subsection of the Bootstrap 12-Grid section in the components' pallet

3. Drag and drop the Label-And-Field component in:

   • empty space of the form, as an independent component

   • inside a Container component

   • inside a Column component

4. Edit the Label component in the first column and the Textbox component in the second column, or even add other components if needed

Responsive-Form-Template

A predefined layout of nested rows and columns; you can further edit it by adding or removing other layout containers.

Create a Responsive-Form-Template

These are the steps for creating a Responsive-Form-Template:

1. Open the Form Editor of your responsive form

2. Find Responsive-Form-Template in Templates subsection of the Bootstrap 12-Grid section in the components' pallet

3. Drag and drop the Responsive-Form-Template component into an empty space of the form, as an independent component

4. Edit the Columns and Rows; you can also add or remove components inside