Elements
This section covers elements – the building blocks that make up your application's user interface
Last updated
This section covers elements – the building blocks that make up your application's user interface
Last updated
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.
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 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 type | Purpose |
|---|---|
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 are elements that allow your users to provide data to your application, such as:
| Element | Purpose |
|---|---|
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
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.
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.
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.
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.
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.
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.
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.
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 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
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.
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.
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.
