# Container properties {% hint style="info" icon="mobile" %} This article describes the containers available in **native mobile apps** ↓ [Click here for web container elements](https://manual.bubble.io/core-resources/bubble-elements/element-properties/web-element-properties/container-properties). {% endhint %} {% tabs %} {% tab title="Experience level" %} This core reference entry is suited for **beginner-level builders****.** [Learn more about experience levels.](#user-content-fn-1)[^1] {% endtab %} {% tab title="In-depth articles (12)" %} To learn about this topic more in-depth, we recommend reading the suggested articles below: Article: [Container elements](https://manual.bubble.io/help-guides/design/elements/web-app/containers) *** #### Navigation In this article we cover how to hide and show container elements to set up a single-page application Article: [Navigation](https://manual.bubble.io/help-guides/logic/navigation) | [Single-Page Applications](https://manual.bubble.io/help-guides/logic/navigation/single-page-applications-spa) *** **Other element categories**\ In this article series, we cover how to work with different element types: * Article series:[ Elements](https://manual.bubble.io/help-guides/design/elements) * Article series: [The element hierarchy](https://manual.bubble.io/help-guides/design/elements/the-element-hierarchy) * Article: [The page](https://manual.bubble.io/help-guides/design/elements/web-app/the-page) * Article series: [Container elements](https://manual.bubble.io/help-guides/design/elements/web-app/containers) (elements that contain other elements) * Article: [Visual elements](https://manual.bubble.io/help-guides/design/elements/web-app/visual-elements) (elements like text, buttons, icons and images) * Article series: [Input forms](https://manual.bubble.io/help-guides/design/elements/web-app/input-forms) (elements that accept input, such as text and file uploads) * Article: [Conditional expressions](https://manual.bubble.io/help-guides/logic/conditions) (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](https://manual.bubble.io/help-guides/getting-started/navigating-the-bubble-editor/tabs-and-sections/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](https://manual.bubble.io/help-guides/design) * Article: [Responsive design](https://manual.bubble.io/help-guides/design/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](#user-content-fn-2)[^2] in the development environment. * Article: [Previewing your app](https://manual.bubble.io/help-guides/getting-started/navigating-the-bubble-editor/previewing-your-app) {% endtab %} {% tab title="Videos (7)" %} Bubble Academy: [How to Group Elements Together](https://www.youtube.com/watch?v=HWmgmzIQRfg)\ Bubble Academy: [Padding in Container Elements](https://www.youtube.com/watch?v=rR1eI6Lv4_I)\ Bubble Academy: [How to Use the Group Focus Element](https://www.youtube.com/watch?v=l_SbovrRt2s\&t=1s)\ Bubble Academy: [Creating Your First Repeating Group](https://www.youtube.com/watch?v=e6oQU__8pmE)\ Bubble Academy: [How to create a Masonry Grid Layout in a Repeating Group](https://www.youtube.com/watch?v=-asG45y04aI)\ Bubble Academy: [How to Use Repeating Group Layout Styles](https://www.youtube.com/watch?v=abMbztw-lmc)
Bubble Academy: [Element videos](https://www.youtube.com/@BubbleIO/search?query=element) (list of videos related to elements) {% endtab %} {% endtabs %} 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 in a view. 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, 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 mobile | Container type | Description | Link | | --------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | View | Views are the base layer for designing content in a native mobile app. | [the-view-element](https://manual.bubble.io/core-resources/bubble-elements/element-properties/native-mobile-element-properties/the-view-element "mention") | | Group | A Group is a general-purpose container that holds other elements. | [group-element-mobile](https://manual.bubble.io/core-resources/bubble-elements/element-properties/native-mobile-element-properties/container-properties-mobile/group-element-mobile "mention") | | Floating group | A container that remains fixed relative to the viewport rather than the view layout. | [floating-group-element-mobile](https://manual.bubble.io/core-resources/bubble-elements/element-properties/native-mobile-element-properties/container-properties-mobile/floating-group-element-mobile "mention") | | Short list | A short list is a container for displaying a fixed set of data items. | [short-list-element-mobile](https://manual.bubble.io/core-resources/bubble-elements/element-properties/native-mobile-element-properties/container-properties-mobile/short-list-element-mobile "mention") | | Horizontal list | A horizontal-scrolling list that displays items side by side. | [horizontal-list-element-mobile](https://manual.bubble.io/core-resources/bubble-elements/element-properties/native-mobile-element-properties/container-properties-mobile/horizontal-list-element-mobile "mention") | | Sheet | Sheets are overlay elements that provide focused interaction while keeping the underlying view visible. | [sheet-element-mobile](https://manual.bubble.io/core-resources/bubble-elements/element-properties/native-mobile-element-properties/container-properties-mobile/sheet-element-mobile "mention") | [^1]: In the Bubble docs, experience levels are categorized into beginner, intermediate, and advanced. To assist with learning, especially for more complex topics, we'll recommend prerequisite reading where it could be beneficial. [^2]: Every chance that you make in your app can be instantly previewed so that you can see how your app looks to your users. User manual article: [Previewing your app](https://manual.bubble.io/help-guides/getting-started/navigating-the-bubble-editor/previewing-your-app) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://manual.bubble.io/core-resources/bubble-elements/element-properties/native-mobile-element-properties/container-properties-mobile.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.