Elements

Experience level

This core reference entry is suited for beginner-level builders.

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

  • 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 in the development environment.

Article: Previewing your app

Videos (1 playlist)

Bubble Academy: Element videos (list of videos related to elements)

Elements are things you draw on . They display images, text, and other information and enable users to interact with the app. Elements have properties that are controlled in the in the Bubble editor.

Elements are classified into three categories:

1. Visual elements Used to display information and trigger when users interact with them (such as clicking a button)

2. Containers: Elements that contain other elements.

3. Input forms: Elements that users use to enter information.

Elements are either part of Bubble's core library or added with .

Sections

This section covers all of the elements in the core library, respective parameters, and shared properties.

General properties

An element's general properties determines what they look like and how they behave.

List of general properties

If you are unfamiliar with what elements are, you can explore the more in-depth article series below:

User manual article series: Elements

Conditional formatting

Conditional formatting means to change the visibility or appearance of an element based on specific conditions.

Conditional formatting

If you are not familiar with what conditional formatting is and how dynamic expressions work, we recommend exploring the more in-depth user manual articles below:

User manual article: Dynamic expressions User manual article: Conditions

States

States (not to be confused with ) are situations the element can find itself in, such as being hovered or visible.

States

Page element

The page element is the fundamental element that contains all the other elements. Each page gets assigned a custom URL in your app.

Page element properties

If you want to learn more about how the page element and its hierarchy of elements work, we recommend viewing the in-depth article series below:

User manual article series: The element hierarchy User manual article series: The page

Visual elements

Visual elements are the elements you can place on that page that cannot contain other elements (groups) and cannot accept input (input elements), such as text, images and icons.

Visual element properties

If you are unfamiliar with elements and would like to know more about how they work, you can check out or more in-depth guides below. You can also extend the number of available elements with plugins.

User manual article series: The element hierarchy User manual article series: Elements User manual article series: Visual elements User manual article: Plugins

Containers

Containers are an element type that contains other elements.

Container properties

There are a few different types of container elements that each serve different purposes. If you want to know more about these different types we recommend checking out the articles below:

User manual article series: The element hierarchy User manual article series: Container elements

Input forms

Input forms are elements that accept some sort of input from the user, such as text, numbers, dates and file uploads.

Input form properties

There are many different types of input forms, and to learn more about the different types we recommend checking out the more in-depth user manual articles below. You can also extend the number of different input forms with plugins.

User manual article series: Input forms User manual article: Plugins

Reusable elements

Reusable elements are collections of elements that can be re-used across your app. For example, if your app has a footer section, you can set that up as a reusable element and use across every page that needs that footer.

Reusable element properties

If you're unfamiliar with reusable elements and how they work, you may be interested in checking out our more in-depth user manuel article below:

User manual article: Reusable elements