> For the complete documentation index, see [llms.txt](https://manual.bubble.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manual.bubble.io/help-guides/design/elements/web-app/containers/groups.md). # Groups Groups are the most basic and versatile container type in Bubble. A group can be placed anywhere on a page or inside another container, and used to organize elements, control layout, hold data, and add visual styling. Because they're so flexible, groups are the container you'll reach for most often when building an app. {% embed url="" %}

Group element example with a form. — Groups can hold elements like the form in the example above.

## What groups do Groups serve three main purposes: 1. **Organize elements.** A group holds other elements as its children, keeping related items together and forming a clear hierarchy in the element tree. 2. **Control layout.** Layout settings on a group determine how its children are arranged and how they respond to different screen sizes. 3. **Hold data.** A group can be given a data source, making that data available to every element inside it. Groups can serve one or all of these purposes at the same time. A single group might structure a form, control its layout, and load the user record being edited. For a broader look at container types and how they compare, see the article on containers. ## Loading data into a group Groups can hold a single piece of data, made available to every element inside. Setting this up takes two steps: 1. Set the group's *Type of content* to the type of data it will hold, such as `User` or `Post`. This tells Bubble what to expect and prevents mismatched data sources. 2. Set the *Data source* to an expression that returns a value of that type, such as `Current User` or `Do a search for:first item`. Once the data source is set, child elements can reference it directly using expressions like `Parent group's User's name`. There are two ways to load data into a group: ### Set the data source directly The data loads as soon as the page loads. This works well for data known upfront. The section [above](#loading-data-into-a-group) explains this method.

Setting the data source directly loads the data immediately.

### Push data with a workflow Use the [*Display data in a group/popup*](/core-resources/bubble-workflows/bubble-actions/element-actions.md#display-data-in-a-group-popup) action to load data in response to a user action, such as clicking an item in a list.

Both methods make the data available the same way. The choice comes down to whether the data should load immediately or in response to user action. ## Controlling layout with groups Groups use one of four layout modes to arrange their children: * **Column** stacks children vertically. * **Row** arranges children horizontally. * **Align** positions children in one of nine fixed positions inside the group. * **Fixed** lets you place each child at a specific position without automatic layout logic. Each mode has its own alignment and spacing options. Choosing the right layout mode is one of the most important decisions when building a responsive design. Nested groups are a common pattern: an outer group with a column layout might hold several inner groups with row layouts, each representing a section of the page. Together, they form the responsive structure of the design. **Article series:** [Responsive design](/help-guides/design/responsive-design.md) ## Styling groups Groups can be styled like any other element. They support background colors, borders, border radius, shadows, opacity, and more. They can also be made transparent or fully invisible when their only purpose is to organize elements or control layout.

Styling properties for a group element. — Group's can be styled individually, or by using predetermined styles.

Using shared styles or style variables keeps groups consistent across your app. **Article series:** [Styles](/help-guides/design/variables-and-styles/styles.md) ## Collapsing hidden groups When a group is set to be invisible, it can also be set to **collapse**. A collapsed group takes up no space on the page, so surrounding elements move up to fill the gap. When the group becomes visible again, the layout reflows to make room for it. This behavior is controlled by the *Collapse when hidden* property. Without it, an invisible group still occupies its original space, leaving an empty area on the page.

The Collapse when hidden property on a group element. — The *Collapse when hidden* property collapses the element when it's hidden, making room for other elements to take its place. Both height and width are collapsed.

Collapsing hidden groups is the foundation of many common Bubble patterns, including [single-page apps](/help-guides/logic/navigation/single-page-applications-spa.md). ## Using groups for navigation Because groups can be shown, hidden, and collapsed, they're a natural way to build in-page navigation without moving the user to a different page. By placing different sections of your app inside separate groups and toggling their visibility, you can let users move between sections instantly without triggering a page reload. This pattern is often used to build single-page apps (SPAs).

Animation of a group collapsing, making room for another group. — In the example above, we are toggling the visibility of Group A and Group B.

### **Building an** [**SPA**](#user-content-fn-1)[^1] **with groups** The pattern typically looks like this: 1. Add several groups to the page, each representing a section of the app (dashboard, settings, profile, and so on). 2. Disable *Visible on page load*, with *Collapse when hidden* enabled. 3. Use conditions or workflows to show the right group based on the user's current context. Because only one group is visible at a time, the layout adjusts automatically, and the user sees a clean view of the section they're in. #### **Showing and hiding groups** There are two ways to control which group is visible: **Conditions** Set conditions on each group that show it when certain criteria are true. A common pattern uses URL parameters, such as showing a group when the URL contains `?navigation=edit_user`. This makes each section bookmarkable and shareable.

Showing a group using a conditional — In this example we're using URL parameters to show a group.

**Workflows** Use actions like [*Show an element*](/core-resources/bubble-workflows/bubble-actions/element-actions.md#show-an-element), [*Hide an element*](/core-resources/bubble-workflows/bubble-actions/element-actions.md#hide-an-element), [*Toggle an element*](/core-resources/bubble-workflows/bubble-actions/element-actions.md#toggle-an-element), or [*Animate an element*](/core-resources/bubble-workflows/bubble-actions/element-actions.md#animate-an-element) to control visibility in response to user actions. Toggle is useful for switching between two states, while Animate adds transitions for a smoother visual effect. {% embed url="" %} #### **Benefits of using groups for navigation** * **Faster transitions.** Switching between sections happens instantly, since the page doesn't reload. * **Preserved state.** Data and input values stay intact as the user moves between sections. * **Simpler navigation logic.** All the flow lives on one page, making it easier to reason about. #### **Things to keep in mind** * SPAs can grow complex quickly. Naming groups clearly and organizing the element tree carefully makes the design easier to manage. * All assets on the page load at once, so a large SPA can affect initial load time. * [URL parameters](#user-content-fn-2)[^2] or custom states are commonly used to track which section is currently visible, letting users bookmark or share links to specific views. ## FAQ: Groups in web apps

What's the difference between a group and a repeating group?

A group holds a single set of elements and, optionally, a single piece of data. A repeating group displays a list of items by repeating a template cell for each record in a list. Groups are used for individual pieces of content, while repeating groups are used for collections.

Can groups hold other groups?

Yes. Nested groups are a core building block for responsive layouts.

Do I need to give every group a data source?

No. Groups can be used purely for layout, styling, or organization without holding any data. A data source only becomes relevant when the elements inside need to reference specific information.

What happens to child elements when I delete a group?

Deleting a group also deletes every element inside it. To keep the child elements, move them out of the group first.

Can I make a group clickable?

Yes. Set up a workflow triggered by the group's When clicked event, and the group will behave like a clickable element. This is useful for cards, menu items, and interactive layouts.

Can a group be transparent?

Yes. Set the background to fully transparent or reduce the opacity. The group still functions normally for layout and data, but has no visible appearance. Note that reducing the opacity and setting the group to invisible is not the same. For groups to collapse, they need to be invisible.

What's the difference between hidden and collapsed?

A hidden group is invisible but still takes up space on the page. A collapsed group is invisible and takes up no space, so surrounding elements move to fill the gap. Collapsing is controlled by the Collapse when hidden property.

Are groups available in native mobile apps?

Yes, see [this article](/help-guides/design/elements/ios-and-android-app/containers.md).

## Other ways to learn

Core reference: Group properties

In the core reference section, you'll find all the settings associated with groups. Reference: [Groups](/core-resources/bubble-elements/element-properties/web-element-properties/container-properties/group-element.md)

[^1]: A single-page app (SPA) lets users move between different sections without reloading the page. Instead of splitting content across multiple pages, everything lives on one page, and elements are shown or hidden based on the user's actions.\ \ **Article:** [Single-page applications](/help-guides/logic/navigation/single-page-applications-spa.md) [^2]: A URL parameter is a piece of data attached to the end of a URL, used to pass information to the page. Parameters follow a `?key=value` format, such as `?section=dashboard`, and can be read by your app to control what's displayed or how it behaves. **Article:** [URL-parameters](/help-guides/data/temporary-data/url-parameters.md)