Bootstrap Field Layout

The Bootstrap Field layout arranges the labels and editors of Field Controls in a uniform grid using the Bootstrap Grid system.

Its layout properties allow you to set how wide the label column should be at each of the Bootstrap screen sizes.

Any Container Control can have the Bootstrap Field layout.

Steps

Create a Form.

Add a Panel Control to a page and set its layout to Bootstrap Field.

Set the layout properties so that the labels take up:

Create 3 Fields and drag them into the Panel Control in the Outline or WYSIWYG View.

Use the device dropdown in the Form editor to test the layout at different screen sizes.

Device Dropdown

Responsive Page Design

Introducing Responsive Design

Bootstrap Grid

Bootstrap Container Control

Bootstrap Row Control

Bootstrap Column Control

Bootstrap Field Layout

Responsive Repeaters

Responsive Layouts

Field Grid layout

Responsive Repeaters

Bootstrap Breakpoints

Bootstrap Column Vertical Alignment

Bootstrap Variables File