formstrap uses the Bootstrap Grid to allow you to create complex form layouts that work on devices with different screen widths.
When you create a new form, a single field is added inside a Bootstrap grid with 5 hierarchical levels. It looks something like this (colours have been added here to assist with the explanation below).
The Grid Structure
Sections
The outermost level is the "Section". You can create multiple sections. Each section can contain multiple Section Columns.
If you give a Section a Page Number then it will become a separate page in the form and the pagination navigation will become active.
Sections occupy the full width of the form container.
Section Column
The next level is "Section Column". Each Section can contain multiple Section Columns.
If you add a Section Column to a Section then it will appear next to (not underneath) the first Section Column. This allows you to create layouts with multiple columns.
Row
The next level is "Row". Each Section Column can contain multiple Rows.
If you add a row to a Section Column then the Row will be displayed underneath the first Row. Rows always occupy the full width of the Section Column.
Column
The next level is the "Column". Each Row can contain multiple Columns.
Like Section Columns, if you add a Column to a Row it will apear next to (not underneath) the first Column in the Row.
Field
The final level is the Field. Each Column can contain multiple Fields.
As with Rows, if you add a Field to a Column then it will appear underneath the first Field. Fields always occupy the full width of the Column.
Adding a New Field
To add a new field you can simply drag the field type you require from the floating field panel into the part of the grid where you want the field to appear.
This video shows a new field being added into a Section - thereby creating a new Section Column. Its decendant structure is created and then the field is added (this all happens in an instant).