> For the complete documentation index, see [llms.txt](https://docs.ninox.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ninox.com/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/container-component.md).

# Container component

Use a **Container** component to group related components in one area on a page. Use it when components belong together and should share spacing or visibility settings.

You can use **Flow** to organize elements inside the container. You can also add a **Background** color to visually separate one section from the rest of the page.

## **Add a Container component to a page**

{% stepper %}
{% step %}
**Open the Add tab**

In the **Settings** panel, open **Add**.
{% endstep %}

{% step %}
**Add Container**

Under **Layouts**, click **Container**.\
Place it where you want it on the page.
{% endstep %}

{% step %}
**Move components into the container**

Drag the views, charts, buttons, or text components you want to group into the container.\
Then select the container again.
{% endstep %}

{% step %}
**Adjust the container**

Open **Settings**.\
Review the **Flow**, **Background**, spacing, and visibility options.\
Use the resize handles to adjust its size.
{% endstep %}
{% endstepper %}

## **Configure a Container component**

In **Settings**, review these options:

* **Label** for the title shown on the component
* **Internal name** is filled automatically. Change it only if needed and carefully. When you script, you use **Internal name**, not **Label**.

Use **Display** to configure the container layout and style:

* **Flow** to define how components are arranged inside the container, for example left to right or top to bottom
* **Padding** to set the inner spacing inside the container
* **Margin** to set the outer spacing around the container
* **Border** to choose the border style, border color, and border width in px
* **Border radius** to round the container corners
* **Background** to choose no color, a preset color, or a custom hex or RGB color
* **Shadow** to add depth around the container
* **Gap** to set the space between components inside the container
* **Overflow** to control how content behaves when it exceeds the container

For settings with the dynamic value icon, click it to define the value with logic.

Use **Visibility** to choose one of these options:

* **Visible** to show the component on the page
* **Hidden** to hide the component on the page
* **Conditional** to define a **Visibility condition** that controls when the component is shown or hidden

  Use **Conditional** when the container should appear only in specific cases.

  Build the condition based on **Fields** and **Tables**.

  This only affects what is shown on the page. It does not change records or permissions.

{% hint style="info" %}
To remove a component from a page, select the component, then click <i class="fa-trash-can">:trash-can:</i> **Delete component** in the blue menu above it.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.ninox.com/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/container-component.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.