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.

Groups serve three main purposes:

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.

Groups can hold a single piece of data, made available to every element inside. Setting this up takes two steps:

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:

The data loads as soon as the page loads. This works well for data known upfront. The section above explains this method.

Use the 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.

Groups use one of four layout modes to arrange their children:

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

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.

Using shared styles or style variables keeps groups consistent across your app.

Article series: Styles

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.

Collapsing hidden groups is the foundation of many common Bubble patterns, including single-page apps.

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).

The pattern typically looks like this:

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.

There are two ways to control which group is visible:

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.

Use actions like Show an element, Hide an element, Toggle an element, or 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.