UiPath Documentation
studio-web
2.2510
true
UiPath logo, featuring letters U and I in white

Studio Web user guide

Last updated Mar 9, 2026

Differences Between Container Controls

Learn the main differences between the container types:

A single container which can hold controls and other containers within it.

A container layout that groups several simple containers, and helps build a complex app layout.

Page containers host another page in the current page.

Grows based on the size of its contents.

Has a fixed height, while its width depends on the screen width.

Grows based on the size of the hosted page.

  • Aligns a group of elements similarly.
  • Aligns a specific element different from that of other elements.
  • You can nest containers:
    • To align/position elements in the inner container differently to the outer one.
    • We recommend nesting maximum 4 containers for performance reasons, however no limit is imposed.

  • Creates the page structure.

  • We recommend using it only in page containers.

  • Nesting Container Layouts leads to extra spaces and maintenance issues.

  • Useful for reusing components in your app, for example having a the same header or body across different pages of your app
  • Helps app maintenance

Example on How to Align Controls Using Containers​

Assume your app contains a form, where you want to collect the following information from the user: First Name, Last Name, Email & School. While Email & School input boxes can be one below the other, we want the First Name and Last Name available side by side.

This can be accomplished by the following steps:

  1. Add a new Container.
  2. Change the layout of the Container to Horizontal.
  3. Add the two Textboxes within the container.
  • Example on How to Align Controls Using Containers​

Was this page helpful?

Connect

Need help? Support

Want to learn? UiPath Academy

Have questions? UiPath Forum

Stay updated