> This page is for Glide Classic.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://www.glideapps.com/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://www.glideapps.com/docs/_mcp/server.

# Container

> Group components together in a custom container.

The **Container** component acts as a parent inside which you can add child Components. This allows you to style, arrange, and add conditions to groups of [Components](/docs/essentials/components).

## Adding and Setting Up the Container Component

#### Container Arcade

In your [Layout Editor](/docs/getting-started/intro-to-layout) of your app, select the tab you want to edit.

Click on the plus (+) symbol in the **Components**.

Select the **Container** component.

The Container component allows you to create column layouts and arrange components side-by-side. For example, the app below shows a side-by-side layout using two columns.

![A side-by-side layout using two columns.](/docs/_fern-img/13080f5ab6203d75ae06b63b9d11a55fa1583e4b8ac64283576ac7ccb65dfcce.webp)

When you choose a layout that is more than one column you'll see sections underneath the Container Component with dividers. This shows you the different sections for your container which will change depending on the number of columns you have.

![Sections in a container component.](/docs/_fern-img/94cf2a9a690696df55d7e18cfe452109ccb0fe9719d34ba32b6dd8a8b369962b.webp)

### Design

In the **General** tab on the right side of the Layout Editor, locate the **Design** section. The Container component allows you to configure the following design options:

![Design options in the container component.](/docs/_fern-img/a85f8e6a1a25e9267d5115360eacaafdc407e158fb4d821bb8c280f7e5243dd5.webp)

* **Background for your Container**: None, Card, Accent, Dark, Highlight, or Image.
* **Padding**: Normal, Large, or XLarge
* **Width**: Large, Medium, or Small

### Conditions

Sometimes you want to set the same [Visibility Condition](/docs/reference/user-experience/visibility-conditions) on multiple components. Rather than creating the same condition on each individual component, you can group them all into a container and set one condition on that container.

## Tabs Component for Nesting Containers

If you have existing containers that you want to nest into a tabbed view, you can use the Tabs component to create this functionality in Glide. The Tabs Container component itself cannot hold containers. To create a tabbed view with existing containers and the Tabs component, you will need to set up the Tabs component in addition to making visibility adjustments to the existing containers.

### Setting up the Tabs Component

> **Feature in Beta**
>
> This feature is in beta. Features in beta can be unpredictable and may change as development continues. The Glide Support team does not provide help with these features. Please post any questions in the [Community forum](https://community.glideapps.com/).

#### Tabs Component - Arcade 1

In the [Data Editor](https://www.glideapps.com/docs/getting-started/introduction-to-the-data-editor)**,** create a column to store your tab names.

In the [Layout Editor](https://www.glideapps.com/docs/getting-started/intro-to-layout), select the screen you want to edit. This screen should already have the containers you want to add to the tabbed view.

Click on the plus (+) symbol in the **Components** panel.

Select **Tabs.**

For the **Selected tabs** field, choose the column you made in step one that stores the tab names.

Choose Line or Button style. This will either underline the Tab name in the interface or put a shaded box around it.

Toggle **Full width on mobile** to spread tabs evenly out across the width of a mobile device. This will create padding and center the tabs on the screen, rather than aligning them to the left.

Click the default Tab to customize its configuration. You can choose a Name, a Display as name, an icon, and enable badge functionality. If no Display as data is provided, then the Name field will be used as the public name of the tab.

* **Note: each tab name you enter will be stored in the column you selected for the Selected tab field**

Set visibility conditions for the tab as needed.

Add additional tabs by selecting **+ Add item.**

### Configuring Visibility Conditions to Nest Containers

#### Tabs container - Arcade 2

Make note of the column name that stores your tab names. You will need this information for this setup.

In the **Layout Editor**, select the existing container you want to appear in the first tab.

In the component **Options menu,** add a visibility condition.

The default condition will be **Show component when.** Now, select the column that stores the tab names you created.

Select **is** and then enter the specific tab name that should hold that container. The value you enter is case sensitive and must match the tab name exactly.

Click away to save the configuration.