Container properties
This article describes elements available in web apps ↓
This core reference entry is suited for beginner-level builders.
Learn more about experience levels.
To learn about this topic more in-depth, we recommend reading the suggested articles below:
Article: Container elements
Navigation
In this article we cover how to hide and show container elements to set up a single-page application
Article: Navigation | Single-Page Applications
Other element categories In this article series, we cover how to work with different element types:
Article series: Elements
Article series: The element hierarchy
Article: The page
Article series: Container elements (elements that contain other elements)
Article: Visual elements (elements like text, buttons, icons and images)
Article series: Input forms (elements that accept input, such as text and file uploads)
Article: Conditional expressions (making your elements change appearance in response to varying conditions)
The design tab In this article we cover the different tools available in the design tab.
Article: ´The design tab
Design
Article series focusing on design in general, explaining terminology and offering resources to help you set up a user-friendly, good looking design.
Article series: Design
Article: Responsive design
Building pages that work on all devices, such as a laptop and a phone.
Previewing your app
In this section about how to preview your app in the development environment.
Article: Previewing your app
Bubble Academy: How to Group Elements Together Bubble Academy: Padding in Container Elements Bubble Academy: How to Use the Group Focus Element Bubble Academy: Creating Your First Repeating Group Bubble Academy: How to create a Masonry Grid Layout in a Repeating Group Bubble Academy: How to Use Repeating Group Layout Styles
Bubble Academy: Element videos (list of videos related to elements)
Containers are structural elements that hold and organize other elements.
They define how child elements are arranged, aligned, and spaced. Layout behavior, responsiveness, and positioning are controlled at the container level rather than on individual child elements.
Containers can also hold data through their Type of content and Data source properties. Child elements inside the container can reference this data directly.
General container properties
Containers define how elements are structured and positioned on a page.
Every container controls the layout behavior of its child elements, including their direction, alignment, spacing, and how they respond to changes in size. Instead of positioning elements individually, you configure the container, and its children follow those rules automatically.
Layout settings determine whether elements stack vertically, align horizontally, layer freely, or use fixed coordinates. They also influence how content adapts across different screen sizes, how extra space is distributed, and how elements behave when content grows or shrinks.
Understanding containers is essential to building responsive, predictable layouts. Rather than thinking in terms of absolute positioning, you design by defining relationships between elements — and the container enforces those relationships consistently.
Container elements for web
Group
A Group is a general-purpose container that holds other elements. It serves both a visual and a data role in your app.
Repeating group
A repeating group is a container that displays a list of items by repeating its cell layout once per item in a data source.
Popup
A container displayed above the page content, typically used for modals, dialogs, or focused user interactions.
Floating Group
A container that remains fixed relative to the viewport rather than the page layout.
Group Focus
A group focus is a contextual container that appears relative to another element on the page.
Table
A Table is a structured container that displays tabular data in predefined rows and columns.
Last updated
Was this helpful?