Elements (PE beta)
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:
Elements 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: Element videos (list of videos related to elements)
Elements are the visual components you place on pages (web) and views (mobile). They display text, images, and other content, and allow users to interact with your app. Each element has configurable properties, which you manage in the property editor.
Mobile elements
Elements that can be used in native mobile apps on iOS and Android devices.
Reusable elements
A reusable element is a container (similar to a group) that holds other elements and can be placed in multiple locations throughout your app. Reusable elements work for both web apps and mobile, but they function independently. A reusable element for web cannot be used in a native mobile app, and vice versa.
Elements are either part of Bubble's core library or added with plugins.
Element property editor
The element property editor is where you make changes to an element's properties and conditionals. You can read more about the element property editor in the article below.
Elements and properties
Some properties are general and appear on most elements. These include layout settings (such as width, height, alignment), visibility controls, conditional formatting, and collapse behavior. They control how an element looks and behaves in relation to the page and other elements.
Other properties are element-specific and only appear on certain element types. For example, an input may include Make required or content format settings, while a date/time picker includes date format and time zone options. Containers include Type of content and Data source, which are not available on basic visual elements like text.
Element-specific properties define the core function of that element. General properties control how that function is presented and behaves within the layout.
This section is divided into these categories:
Container-specific properties
Properties that only apply to a specific container element type.
Element-specific properties
Properties that only apply to a specific non-container element type.
Container-specific properties
Containers also come with properties that only apply to a specific type.
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.
Mobile
Group
A general-purpose container that holds other elements. It serves both a visual and a data role in your app.
Floating Group
A container that remains fixed relative to the viewport rather than the view layout.
Sheet
Overlay elements that provide focused interaction while keeping the underlying view visible
Element-specific properties
Element-specific properties are documented in articles that correspond to the element categories, as they appear in the element palette. Each category groups elements with similar functionality, and their reference entries describe the properties unique to those elements.
Web
Bubble-made plugin elements
Elements added by installing plugins. The documentation only covers plugins made by Bubble.
Mobile
Reusable elements
Reusable element
A reusable element is a container (similar to a group) that holds other elements and can be placed in multiple locations throughout your app. Reusable elements work for both web apps and mobile, but they function independently. A reusable element for web cannot be used in a native mobile app, and vice versa.
Reusable elements (web and mobile)
Last updated
Was this helpful?