> For the complete documentation index, see [llms.txt](https://guides.noloco.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guides.noloco.io/components/containers.md).

# Containers

Containers in Noloco allow you to organize and group multiple components on your pages, providing enhanced flexibility and control over your layout and visibility settings.

A container is a versatile component that can be added to both blank pages and record pages. Unlike other components, containers can nest multiple components within them, enabling better organization and layout customization.

### Using Containers in Noloco

{% embed url="<https://www.youtube.com/watch?v=IlLoW_RZFZ4>" %}

### **Benefits of Using Containers**

* **Visibility Rules**: Easily set visibility rules for multiple components at once.
* **Flexible Layouts**: Introduce columns and more complex layouts by grouping components within a container.
* **Denser Layouts:** Fit more information on the screen by adding a container that lets your content fit better together

<figure><img src="https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-a59a6a0842481ba5c1cc7dd816b395401a2c3334%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

### **How to Use Containers**

1. **Add a Container**: Navigate to the page where you want to add a container and select “Add Container”.
2. **Add Components**: Place new components inside the container or drag existing components into it.
3. **Arrange and Customize**: Adjust the placement and settings of the components within the container to suit your needs.

{% @arcade/embed url="<https://app.arcade.software/share/zH1nocwyUok6x8JcQVs8>" flowId="zH1nocwyUok6x8JcQVs8" %}

### **Optimizing Layouts with Containers**

Containers are particularly useful for creating side-by-side layouts with [charts](/charts/overview.md) and other components. Here's how to optimize your page layouts:

#### **Creating Side-by-Side Layouts**

To align charts and components horizontally:

1. Add a container to your [blank page](/pages/blank-pages.md) or [record page](/record-pages/overview.md)
2. Place your chart in one column of the container
3. Add your additional component (such as text, a [collection](/views/display.md), or another chart) in an adjacent column

#### **Adjusting Component Widths**

To ensure components align properly within a container:

* Set explicit widths for each component inside the container
* For balanced layouts, configure components to each occupy 50% of the container's width
* Manually adjust widths to your desired proportions if the default alignment doesn't meet your needs

{% hint style="info" %}
If you'd like a list displayed next to a chart, set both to occupy half the container's width. This ensures they render cleanly side-by-side without unnecessary empty space.
{% endhint %}

#### **Maximizing Space Usage**

To eliminate extra white space around charts:

* Set your chart to **Full width** to fill the available container space
* Ensure the parent container is also set to full width
* This allows charts and components to utilize the maximum available area

### **Example Use Cases**

* **Dashboard Customization**: Group related widgets and control their visibility based on user roles.
* **Form Layouts**: Create multi-column forms by nesting input fields within containers.
* **Chart Dashboards**: Display [charts](/charts/overview.md) alongside data lists or statistics for quick comparison and analysis.


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://guides.noloco.io/components/containers.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.