Comment on page
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.
All elements 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 element tree 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 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.
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 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.
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.
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.
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.
In the example above, we have loaded the current user into the container, and it lets us easily reference the user in the input elements 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.
The same can be done with workflows. 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 cells of a Repeating Group.
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.
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.
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.
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.