Using the Container, Row and Column

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 Row and 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.

Responsive Containers

The Container is a layout component like row and column. However, in it you can put multiple components and control how they are placed inside.

Justify Content

To rename container/row/column elements, double-click on the corresponding element in the RESPONSIVE LAYOUT tree.

Responsive Containers Renaming

Column Type

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.

Column Width

If you use Bootstrap, the column width property defines how many of the 12 parts the column will occupy.

Responsive Containers

  • Save metadata—To save the medatadata on the file system use keyboard shortcut Cmd/Ctrl + S.
In this article
Not finding the help you need?

Unite UX direction is evolving!

Dear friends, after gaining plenty of great experience and feedback through working with you, our direction evolves to better serve your needs. Our mission to bridge the design to development gap remains unchanged. The way to solve it, though is new. Visit our webpage to meet the new Unite UX: The collaborative design to development UI components builder.

Explore the New Unite UX