To create the responsive layout of the application, use layout container or row and column responsive containers which are available by clicking the Container, Row and Column buttons in RESPONSIVE LAYOUT.
The row and column features correspond to
Col elements of the Bootstrap Grid system. As their children, each row can contain only columns and each column can contain a single component or multiple rows.
Container is a layout component like row and column. However, in it you can put multiple components and control how they are placed inside.
To rename container/row/column elements, double-click on the corresponding element in the RESPONSIVE LAYOUT tree.
Each column can be used as any of the following elements:
- A Bootstrap column—When the column type is Bootstrap, the columns can take 12 parts of its parent container.
- A container with a fixed width—When the column type is set to Fixed, the column occupies the space of the screen that equals to its width.
- A flex container—When the column type is set to Flex, the column occupies the entire empty space from the parent containers and its sibling column elements.
If you use Bootstrap, the column width property defines how many of the 12 parts the column will occupy.
- Save metadata—To save the medatadata on the file system use keyboard shortcut Cmd/Ctrl + S.