This section covers elements – the building blocks that make up your application's user interface

This is the long-form article on Bubble's different elements. If you want the short-form technical reference that details all the different element properties, you'll find that in the link below.

Reference: Elements

Every part of your app's user interface consists of elements that are organized in a hierarchy. Each element comes with a set of style properties and responsive properties. Together, the hierarchy, style properties and responsive properties make up the instructions to the browser that helps it render the page correctly.

Think about it: not only does the browser need to know what elements there are and how they should look, but also how they should behave on different screen sizes and as elements are displayed, hidden and animated on the page.

What is the element hierarchy?

All elements that you add to your page become part of a hierarchy that controls the structure and design of the page.

The page itself is the parent of every other element on the page, and you can group your elements into containers to keep building more parent-child relationships. This forms the basis of how your browser renders the page correctly.

Article: The element hierarchy

Using elements to build a user interface

Whether you want to create an elaborate presentation page with images and animations or a simple signup form, it's all done by combining different elements in a way that your users find useful and visually appealing.

Bubble offers a lot of different elements serving different purposes.

In this section we'll cover the different categories of elements that you can place on the page

Plugins can also sometimes add new elements that you can place on the page, adding functionality ranging from very simple to very advanced.

Check out out plugin store for information and inspiration.

Elements cover a wide range of different things you can place on the page and they are split into three different categories:

Visual elements

Visual elements are the elements that you place on the page primarily for aesthetic purposes or to display information. They do not accept , but they do accept clicks and some of them – such as buttons – are usually connected with .

Examples include:

  • buttons

  • images

  • text

  • icons

  • videos

  • maps

  • links

  • shapes

Article: Visual elements


Groups are elements that contain other elements. A group serves two purposes:

  • It gathers other elements (including other groups) inside one container. All the elements belong to the same level of the and follow along if the group is moved or deleted.

  • A group can also be used to hold data relevant to the elements inside of it. For example, one group may contain an Edit user form with different elements to edit the user's details such as name and phone number.In that case, the group's data type would be user, allowing all elements inside to reference that user.

Bubble offers several different group types that server different purposes:

Container typePurpose

Hold elements and data anywhere on the page

Show a list of things in a flexible design such as cards, lists, and a masonry grid

Show a list of things in rows/columns with headers

Display elements on top of everything else, such as a warning message

Hover elements above other elements and stick them to one of the screen edges, like a top navigation bar that stays put

Display a group that disappears as soon as you click anywhere else, such as a dropdown menu

Read more about these properties in the full article on containers:

Article series: Containers

Input forms

Input forms are elements that allow your users to provide data to your application, such as:


Names, comments, other short info

Descriptions and other longer text. Allows line breaks.

Check to hold a yes/no value, such as accepting terms and conditions

Formatted text, like blog posts and product descriptions

Pick an option from a dropdown list, either static or from the database

Search-as-you-type in the database

Select one option out of multiple

Pick a numerical value with a visual, draggable slider

Dates like birthdays, deadlines, etc

Upload and preview images like profile pics

Upload other types of files

Read more about each element in the dedicated input forms article:

Article series: Input forms

Element behavior

Elements can be set to behave in different ways depending on specific circumstances or actions that your users take. There are two ways in which elements can become interactive:


Conditions allow you to set rules for each element that changes how the element looks depending on whether the rule . All aspects of element styling can be manipulated with these rules, and this opens up powerful ways to communicate with your users, ranging from subtle nudges to hiding and showing entire sections of the page.

If you want to learn more about how to use conditions, check out our dedicated article on the subject:

Article: Conditions

To see how this can be used in different scenarios, let's go over some examples:

  • A condition could be set up on a button to check whether a form is properly filled or not, and style the button to be greyed out and unclickable if it isn't

  • A condition could be set up on a group to check whether the current user is logged in. If not, the group is invisible.

  • A condition on a group could be set up to check a parameter in the browser's URL. If the parameter is present, the group is visible.


If you want to learn more about how to build workflows, check out our dedicated article on the subject: Article: Building workflows

The second way to make elements on your page interactive is to connect them to workflows. A workflow is the umbrella term for an event (such as a button click) that leads to one or more actions (such as writing something to the database).

Using actions is how you get your app to perform specific tasks, such as:

  • Creating, editing or deleting something in the database

  • Logging users in and out

  • Showing, hiding and animating stuff on the screen

  • Navigating to a different page or external link

This is not the full list by any means, but as you can see there are many different actions you can run as a user clicks and types their way around your app.

A workflow can consist of multiple actions chained together. For example, after saving something in the database, you may want to display a confirmation message to your users.

Naming elements

You can edit the name of your element in the top of its Property Editor. Select the existing name and start typing. Conventions for naming your elements is entirely up to you. For example, you could simplify each element name and write what it does next to it, such as “btn submit," or you could capitalize the first word all together or use underscores. Whichever convention you pick, make sure to use it throughout your app. The consistency will help you locate your elements and debug your design as your app grows.

Video lesson

Always use singular names for your data types, such as Product instead of Products. Bubble has a built-in functionality for word inflection. This means that a singular noun will automatically be recognized and displayed in the appropriate plural form of the word when referring to multiple instances of that noun. In other words, Product will shows as Products whenever it makes sense.

By default, Bubble names new elements by its type. If we add a button, Bubble will name it "Button A" if there are no other buttons on the page, or "Button B" if there is a button already. If you change the contents of that element to include text, Bubble will take that text and change the name of the element for you. For example, if we change this button's text to "Submit," the name will update to "Button Submit." You might have several "Submit" buttons throughout your application, so it's a good practice to name your elements as you go along so that you can keep track of each.

Finding elements

If your page has many elements, you may find it difficult to find elements to edit them. Here are a few ways you can find them easily.

The element picker

Use the Element picker in the toolbar. All the page elements are listed alphabetically; you can start typing a name and you'll see the different elements. When you hover an entry in the dropdown you will see a thumbnail to confirm this is the right element, and clicking on it will show it and select it. To make the best use of this, you should take the habit of naming your elements carefully.

Using mouse clicks

When two elements overlap, clicking on them by pressing CMD (MacOS) Ctrl (Windows) will select each element one-by-one, even if one is completely under another.

Using this, you can select the element under all the others, without modifying your page layout.

Using the X-Ray feature

Clicking on the 'X-Ray' icon will make elements semi-transparent, which is handy combined with the CMD+click (MacOS) Ctrl+click (Windows) operation above.

Using the element tree

The gives you a clear hierarchic view of all the elements on your page and is an easy way to select (and even move) the elements that you need to.

The App Search Tool

The App Search tool can be used for more advanced search parameters and searching across pages. It's found in the upper right corner of the Bubble editor.

You can read more about the search tool in the article below.

Article: The search tool

Video lesson

Locking elements

If you find yourself moving some elements that should never be moved, you can add some protection in the Editor by checking the box Lock this element (not draggable in editor).

This is purely for editing purposes, and can be handy when working on complex pages.

Using the Inspector to find Element connections

An element can be connected to other parts of your app in many different ways: they can hold custom states, belong to a parent container, be used in a workflow or be referenced in an expression or condition somewhere.

To keep track of how elements are connected to different things you can use the Element inspector. This shows you element connections categorized by:

    • Create, edit and delete custom states on the element

  • Other elements

To reveal the Element Inspector, click on the information icon in the title bar of the property editor.

Element security

Even though Bubble is a no-code platform, the final application consists of code so that a browser knows how it should look and function. The elements that you place on the page become a part of this code, which is downloaded to the device of every user who loads the page.

This means that a tech-savvy user can open up the code file and have a look at the elements. From a security perspective, this means that you should never place any sensitive information in an element. Even if it's not visible in your app, it can still be revealed in the code.

Places where you should keep this in mind are in the element name, text content and default values.

A good rule of thumb for element security is to assume that all information you add to a page, whether in elements or workflows, can be viewed by a user in the code. As such, you should avoid placing sensitive information on the page.

Other ways to learn

Video lessons

Last updated