If you are learning Microsoft Power Apps Canvas Apps, you will eventually come across a very useful control called a Container.

At first, containers may seem unnecessary. You can place labels, buttons, text inputs, galleries, and other controls directly on the screen. So why do we need containers?

In this tutorial, we will learn containers practically by building a simple Canvas App.

By the end of this tutorial, you will understand:

  • What is a Container in Power Apps?
  • Why do we need containers?
  • What problems do containers solve?
  • How to add a container
  • How to place controls inside a container
  • How to move multiple controls together
  • How containers help with responsive design
  • How to use Horizontal and Vertical containers
  • How to use containers for application layouts
  • Best practices for using containers

1. What is a Container in Power Apps?

A Container is a control that allows you to group multiple controls together.

For example, imagine that you have the following controls on a screen:

  • Label – Employee Name
  • Text Input – Employee Name
  • Label – Department
  • Dropdown – Department
  • Button – Submit

Without containers, all these controls are independent.

With a container, you can put related controls inside one parent control.

Think of a container like a box.
You put multiple controls inside the box and then manage the box instead of managing every control individually.

A simple structure could look like this:

Screen
│
├── Container
│   ├── Label
│   ├── Text Input
│   ├── Label
│   └── Dropdown
│
└── Button

2. Why Do We Need Containers?

You might be thinking:

"I can already put controls on the screen. Why should I use a container?"

There are several important reasons.

1. Group related controls

Controls belonging to the same section can be placed together.

2. Move multiple controls together

Instead of moving five controls individually, you can move the container.

3. Make applications easier to maintain

You can organize your screen into logical sections.

4. Build responsive layouts

Containers are especially useful when building applications that need to work on different screen sizes.

5. Automatically arrange controls

Horizontal and vertical containers can automatically arrange their child controls.

3. Let's Build a Practical Example

Instead of just learning the theory, let's create a simple application.

We are going to create an Employee Registration Screen.

The screen will contain:

  • Application title
  • Employee Name
  • Email
  • Department
  • Submit button

We will use containers to organize these controls.

4. Create a Canvas App

  1. Open Power Apps.
  2. Select Create.
  3. Select Blank canvas app.
  4. Select the Tablet layout.
  5. Give the application a name such as ContainerDemo.

Once the application opens, you will see the default screen.

5. First Create the Screen Without Containers

Before using containers, let's understand the problem they solve.

Add the following controls directly to the screen:

  • Label
  • Text input
  • Label
  • Text input
  • Label
  • Dropdown
  • Button

Arrange them like a simple employee form.

Now imagine that you want to move the entire form to the right side of the screen.

You would need to select and move multiple controls.

This is where containers become useful.

6. Add Your First Container

Let's now create a container.

  1. Select Insert.
  2. Open the Layout category.
  3. Select Container.

A container will be added to the screen.

You can resize the container using its handles.

Important: A container is a parent control. Controls placed inside the container become child controls of that container.

7. Put Controls Inside the Container

Now move your Employee Name label and Employee Name text input into the container.

Do the same for the other controls.

Your control hierarchy should now look something like this:

Screen
│
└── Container
    ├── lblEmployeeName
    ├── txtEmployeeName
    ├── lblEmail
    ├── txtEmail
    ├── lblDepartment
    ├── drpDepartment
    └── btnSubmit

This hierarchy is extremely important when working with containers.

8. The Biggest Advantage – Move Everything Together

Now select the container.

Move the container to another location.

Notice that all controls inside the container move with it.

Instead of moving seven controls individually, you only need to move one container.

Key concept:
When controls are grouped inside a container, you can manage the group through the parent container.

9. Understanding Parent and Child Controls

This is an important concept for beginners.

The container is the parent.

The controls inside the container are the children.

Parent
  ↓
Container
  ↓
Child controls
  ├── Label
  ├── Text Input
  ├── Dropdown
  └── Button

This parent-child relationship becomes very useful when designing complex applications.

10. Horizontal Container

Now let's look at another important type of container.

A Horizontal container arranges its child controls horizontally.

For example:

[ Employee Name ] [ Email ] [ Department ]

Instead of manually positioning every control, the container can manage the layout.

How to add a Horizontal Container

  1. Select Insert.
  2. Select Layout.
  3. Select Horizontal container.

Add a few labels or buttons inside it.

You will notice that the controls are arranged from left to right.

11. Vertical Container

A Vertical container arranges controls from top to bottom.

For example:

Employee Name
[______________]

Email
[______________]

Department
[______________]

[ Submit ]

This is very useful for forms.

How to add a Vertical Container

  1. Select Insert.
  2. Select Layout.
  3. Select Vertical container.

Place your form controls inside the container.

The container will manage their vertical arrangement.

12. Containers for Application Header

Containers are not only useful for forms.

They are commonly used to create application headers.

For example:

--------------------------------------------------
| Employee Management              User Profile |
--------------------------------------------------

You can create a horizontal container at the top of your screen and put the following controls inside it:

  • Application logo
  • Application title
  • Navigation buttons
  • User information

Now if you need to move or resize the header, you can manage the entire header using the container.

13. Containers for Navigation Menus

Another common use case is a navigation menu.

For example:

-----------------------------------
| Home
| Employees
| Requests
| Reports
| Settings
-----------------------------------

You can create a vertical container and place your navigation buttons inside it.

This gives you a much cleaner application structure.

14. Containers for Cards

Containers are also very useful when creating dashboard cards.

For example:

+----------------+  +----------------+
| Total Requests  |  | Pending        |
|      125        |  |      32        |
+----------------+  +----------------+

Each card can be created using a container.

Inside the container you can place:

  • Icon
  • Title
  • Number
  • Description

Now you have a reusable structure for dashboard cards.

15. Containers and Responsive Design

This is one of the most important reasons to learn containers.

Suppose your application is used on:

  • Desktop
  • Laptop
  • Tablet
  • Different browser window sizes

If you manually position every control using fixed X and Y values, maintaining the application can become difficult.

Containers allow you to create layouts that can adapt more easily to available space.

Think of it this way:

Fixed positioning says: "Put this control at this exact location."

Containers allow you to think more in terms of: "Put these controls inside this section and let the layout manage them."

16. Auto Layout Containers

Horizontal and vertical containers are often referred to as Auto Layout containers.

The main idea is that the layout of child controls is managed by the container.

This reduces the need to manually calculate the X and Y position of every control.

For example, instead of manually placing three buttons:

Button 1 → X = 100
Button 2 → X = 220
Button 3 → X = 340

You can put them inside a horizontal container.

Horizontal Container

[Button 1] [Button 2] [Button 3]

The container manages their layout.

17. Nested Containers

Containers can also be placed inside other containers.

This is called nested containers.

For example:

Screen
│
└── Main Container
    │
    ├── Header Container
    │
    ├── Content Container
    │   ├── Left Container
    │   └── Right Container
    │
    └── Footer Container

This approach is extremely useful for large Canvas Apps.

18. A Real Application Layout

Let's imagine that we are building an Employee Management application.

A good container structure could be:

Screen
│
└── Main Vertical Container
    │
    ├── Header
    │
    ├── Body
    │   │
    │   ├── Navigation
    │   │
    │   └── Content
    │
    └── Footer

This makes the application much easier to understand and maintain.

19. When Should You Use Containers?

As a beginner, you can follow this simple rule:

If multiple controls logically belong together, consider putting them inside a container.

For example:

Scenario Recommended Container
Application Header Horizontal Container
Form Vertical Container
Navigation Menu Vertical Container
Dashboard Cards Horizontal/Vertical Containers
Footer Horizontal Container

20. Containers vs Grouping Controls

Beginners often confuse containers with grouping.

They are not exactly the same thing.

A group can help you select multiple controls together.

A container is a layout control that creates a parent-child relationship and can manage the layout of its children.

For modern Canvas App development, containers are especially valuable when building structured and responsive layouts.

21. Common Beginner Mistakes

Mistake 1 – Using containers everywhere

You don't need to put every single control inside a separate container.

Use containers when they provide a logical layout or grouping benefit.

Mistake 2 – Using fixed X and Y positions everywhere

When building responsive applications, relying heavily on fixed positions can make the layout harder to maintain.

Mistake 3 – Creating unnecessarily deep nesting

Nested containers are useful, but too many unnecessary levels can make the application difficult to understand.

Mistake 4 – Ignoring the control hierarchy

Always check the Tree view and understand which controls are inside which container.

22. Practical Exercise for Beginners

Now pause the video and try this yourself.

Create an Employee Registration screen containing:

  • Application title
  • Employee Name
  • Email
  • Department
  • Job Title
  • Submit button
  • Cancel button

Use the following structure:

Screen
│
└── Main Container
    │
    ├── Header Container
    │
    ├── Form Container
    │
    └── Button Container

Inside the Button Container, place the Submit and Cancel buttons horizontally.

This small exercise will help you understand the practical purpose of containers much better than simply reading about them.

23. Quick Recap

Let's quickly summarize what we learned.

  • A container is a parent control.
  • Controls inside it become child controls.
  • Containers help organize controls.
  • They make it easier to move related controls together.
  • Vertical containers arrange controls vertically.
  • Horizontal containers arrange controls horizontally.
  • Containers are useful for forms, headers, navigation, dashboards and footers.
  • Containers are an important part of responsive Canvas App design.
  • Containers can be nested to create complex application layouts.

24. Final Takeaway

If you are new to Power Apps, don't think of containers as just another control.

Think of them as the building blocks for organizing your application's layout.

Once you become comfortable with containers, you can start designing Canvas Apps using sections such as:

Header
   ↓
Navigation + Content
   ↓
Forms / Galleries / Dashboards
   ↓
Footer

This will make your applications cleaner, easier to maintain, and much easier to make responsive.

Next Step:
In the next tutorial, we can take this concept further and build a complete responsive Canvas App layout using nested horizontal and vertical containers.