# Elements (PE beta) {% 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 (11)" %} 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](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 (1 playlist)" %} Bubble Academy: [Element videos](https://www.youtube.com/@BubbleIO/search?query=element) (list of videos related to elements) {% endtab %} {% endtabs %} Elements are the visual components you place on pages[^3] (web) and views[^4] (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](#the-element-property-editor).

Main category	Description	Link
Web elements	Elements that can be used in web apps that live in a web browser.	web-element-properties
Mobile elements	Elements that can be used in native mobile apps on iOS and Android devices.	native-mobile-element-properties
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.	reusable-element-properties

Elements are either part of Bubble's core library or added with plugins[^5]. ## Element property editor The element property editor is where you make changes to an element's [properties](#elements-and-properties) and [conditionals](https://manual.bubble.io/core-resources/bubble-elements/conditional-element-properties). You can read more about the element property editor in the article below. [the-element-property-editor](https://manual.bubble.io/core-resources/bubble-elements/the-element-property-editor "mention") ## 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:

	Description	Link
Container-specific properties	Properties that only apply to a specific container element type.	#container-specific-properties
Element-specific properties	Properties that only apply to a specific non-container element type.	#element-specific-properties

### **Container-specific properties** Containers also come with properties that only apply to a specific type. #### Web

Container type	Description	Link
Page	The top-most layer of your design hierarchy. Each page has its own URL.	page-properties
Group	A Group is a general-purpose container that holds other elements. It serves both a visual and a data role in your app.	group-element
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.	repeating-group-element
Popup	A container displayed above the page content, typically used for modals, dialogs, or focused user interactions.	popup-element
Floating Group	A container that remains fixed relative to the viewport rather than the page layout.	floating-group-element
Group Focus	A group focus is a contextual container that appears relative to another element on the page.	group-focus-element
Table	A Table is a structured container that displays tabular data in predefined rows and columns.	table-element

#### Mobile

Container type	Description	Link
View	The top-most layer of your design hierarchy in a native mobile app.	the-view-element
Group	A general-purpose container that holds other elements. It serves both a visual and a data role in your app.	group-element-mobile
Floating Group	A container that remains fixed relative to the viewport rather than the view layout.	floating-group-element-mobile
Short list	A short list is a container for displaying a fixed set of data items.	short-list-element-mobile
Horizontal list	A horizontal-scrolling list that shows items side by side.	horizontal-list-element-mobile
Sheet	Overlay elements that provide focused interaction while keeping the underlying view visible	sheet-element-mobile

### 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

Category	Description	Article link
Visual	Elements like text, buttons, icons and images.	visual-element-properties
Input forms	Elements like text input, date/time picker, checkbox and dropdown.	input-form-properties
Bubble-made plugin elements	Elements added by installing plugins. The documentation only covers plugins made by Bubble.	bubble-made-plugin-element-properties

### Mobile

Category	Description	Article link
Visual	Elements like text, buttons, icons and images.	visual-element-properties-mobile
Input forms	Elements like text input, date/time picker, checkbox and selectable list.	input-form-properties-mobile

### Reusable elements

Category	Description	Article link
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-element-properties (web and mobile)

[^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) [^3]: Each **page** of your app is defined as the top element, that all other elements are contained within. Each page has a unique URL and a unique collection of elements and workflows.\ \ Article: [the-page](https://manual.bubble.io/help-guides/design/elements/web-app/the-page "mention") [^4]: Each view in a native mobile app is a full-screen state that the app transitions between as the user navigates. Like pages, each view has its own collection of elements and workflows, but unlike pages, views don't have URLs.
Article: [the-view](https://manual.bubble.io/help-guides/design/elements/ios-and-android-app/the-view "mention") [^5]: *Plugins* are extensions that you can use to extend Bubble's capabilities*.* They can add new elements, actions, API connections and a lot more*.* Article: [Plugins](https://manual.bubble.io/help-guides/integrations/using-plugins) Reference: [The plugin tab](https://manual.bubble.io/core-resources/bubbles-interface/plugins-tab)\ \ \ \ \