Containers

This section covers the container elements, used to group and control the behavior of other elements

This section takes a long-form look at what containers are and how you can use them in different situations. To see the full list of settings available on container elements, you can check out our more concise core reference entry on containers.

Containers can hold elements like the form in the example above. Here we're using a group element.

All on your page are part of a hierarchy with the page as the top parent.

Containers are used to contain elements and control how they behave on the page. You can place elements inside of a container, making it the parent and the element(s) its children. The will display the hierarchy of the parent-child relationship.

Bubble has six container types that behave in different ways. Knowing how the different types behave is the key to mastering design in Bubble, so we recommend spending some time getting to know their behavior.

Click on each container type for more information and a link to the full article:

Groups – placed directly on the page to build the page hierarchy

Groups are the most basic container type and can be placed directly on the page to build a hierarchy of parent-child relationships. They are used to contain elements, control responsive behavior, navigation and to hold data.

Article: Groups

Repeating groups – used to display lists of things in a flexible design

Repeating groups are similar to groups, but will repeat its content once for each item in a list of things such as database records. Repeating groups are used to display lists such as (but not limited to) a list of users, a search result, product cards and photo masonry grids. A repeating group allows you to design lists in a flexible way, and the table element (below) lets you set up a more structured table with fixed row/column headers. Article: Repeating Groups

Table element - used to display a list of things in neat rows and columns

Table elements are similar to repeating groups in that it shows a list of things, but unlike the repeating group container a table can have fixed row/column headers and is useful for setting up more strict table-like structures.

Article: The Table element

Popups – display a group above all other elements (i.e. a message or signup form)

The Popup group type is a a group that is displayed above all other elements and is centered on the screen regardless of the scrolling position of the page. They can be set up to hide or blur the page below. As such, they are a useful way to bring an important message or forms to the user's attention immediately.

Article: Popups

Floating groups – hovers above page attached to a screen edge (i.e. navigation bar)

Floating Groups are a group type that can be set up to hover above other elements on the page and they can be attached to any side of the screen and stay there regardless of whether the user scrolls up and down.

Article: Floating Groups

Group focus – remains visible as long as it's in focus (i.e. dropdown menu)

The Group Focus has two main characteristics:

• It will remain visible only for as long as it is in focus. Focus in this context means until you click anywhere else on the page.

• They are displayed relative to another element by a set number of pixels

This makes the Group Focus very useful for things like dropdown menus, contextual menus and tooltips.

Article: Group Focus

Styling containers

Containers can be set to be invisible, but they can also have a background style, roundness, borders and shadows, just like other elements.

Groups can be invisible, like on the left, or they can be styled. The right group has a white background color, rounded corners and a shadow.

You access a group's styling settings by double-clicking it or by clicking on it in the element tree.

Loading data into containers

Containers are not just visual elements; they can also be used to hold different kinds of data. For example, if you are working on a form that lets you edit a user (with input fields for name, phone number and address), you can set the containers data source to User and load the user data into the container.

The data loaded into the container is then made available to all of its child elements. This allows you to load specific data into parts of a page, such as in the example below where we are loading the data about a user into the container:

You can load data into a group to easily reference it in other elements and workflows.

Referencing data in elements

In the example above, we have loaded the current user into the container, and it lets us easily reference the user in the in the form:

By loading data into a group we can reference that data in the group's child elements. In the example above we're loading the user's name into an input field.

In the illustration above, the container is loading the current user, and we can use that information in the container's child elements. In the screenshot, we're looking at the settings for the input field. We're referencing the Parent groups's User's name.

Referencing data in workflows

The same can be done with . In the example below, we want the Save changes button to save the data from the input fields to the database. By referencing the parent group's user, we can save it easily:

If an element like a button is placed within a group that holds data, we can reference that data in workflows connected to that element. In the example above we're referencing the user loaded into the parent group of the button.

Referencing the parent group's data in a workflow requires that the event that triggers the workflow is connected to one of the container's child elements. For example, a Save button inside of the container could trigger a workflow that saves changes from the form.

Referencing data in elements and workflows can be done on all group types, including the of a .

Different ways of loading data

There are two different ways to load data into a container:

• You can set the Data source of the container to load data. In the example above we are loading the Current user, but you can also fetch it in other ways, such as performing a database search using Do a search for.

Setting the Type of content to User and the Data source to Current user instructs Bubble to load the data about the current user into the container

• You can use a workflow to push data to the container. This is useful when you want the loading of data to be the result of a user action.

  

  In this example we are using the Display data in group/popup action to search for a user and load its data into the group. We'll then be able to reference the loaded user in elements and workflows contained within the group.

The first method will load the data as soon as the page is loaded, while the second will await a trigger to execute the workflow. You could also use the latter method to allow the user to select which user they want to edit.

Resetting a container

You can reset a container to wipe the thing that is displayed in it. When you use a reset group action, the thing will be reverted to what was defined as the datasource. This is useful to note since reset doesn't mean empty – it means reset to its initial state.

Whenever you change the content of a container, it's effectively being reset and displaying the new thing. This means that all child elements (such as input fields containing text) will update their content to reflect the data being loaded into its parent container.

Note that whenever the content of a group changes, the group effectively is being reset and a new thing is being displayed in it.

Groups and responsive settings

You can use groups to control the responsive behavior of the elements inside of it. For example, if you have three input fields that you want to never be more than 200 pixels wide, you can set the maximum width on the group that holds them. That way, the max width are applied to all of the elements and you don't need to apply it one by one.

You can read more about responsive design in our Responsive design article series. Article series: Responsive design

Using groups to control responsive behavior is the key to efficiently set up a responsive design.

In this example, we have set the max width of the group to be 480 pixels. This way, we also control the width of the elements inside of that group.