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.
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:
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.
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:
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:
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:
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.
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.
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.
Last updated