Bubble Docs
  • Introduction
  • New? Start Here
  • What is Bubble?
  • The Glossary
  • User manual
    • Getting started
      • What is Bubble?
      • Building your first app
        • Planning features
        • Database structure
        • Design and UX
        • eCommerce and payments
          • Shopping cart
          • Checkout page
          • One-time payments
          • Subscriptions
          • Marketplace
      • Creating and managing apps
      • The Bubble editor
        • Tabs and sections
          • Design tab
            • The element tree
            • The property editor
          • Workflow tab
          • Data tab
          • Styles tab
          • Plugins tab
          • Settings tab
            • Application settings
              • Custom headers/body
              • Visual settings
              • Social media sharing
              • Translating your app
              • Email settings
              • Collaboration
            • Custom domain and DNS
          • Logs tab
        • Tools
          • Key features
          • The search tool
          • The Issue Checker
          • The element tree
          • The element property editor
          • The debugger
          • Notes
        • Previewing your app
      • Transitioning to Bubble from...
        • JavaScript
        • HTML and CSS
        • SQL
    • Design
      • Elements
        • The element hierarchy
          • The element tree
        • The page
        • Containers
          • Groups
          • Repeating groups
          • Table elements
          • Popups
          • Floating groups
          • Group focus
        • Visual elements
        • Input forms
          • Text and numbers
          • Dates and time
          • File uploads
          • Selection controls
        • Reusable Elements
      • Styling
        • Color variables
        • Font variables
        • Styles
        • Custom Fonts
      • Responsive design
        • Building responsive pages
        • Legacy articles
          • The Basics (Legacy)
          • Building Responsive Pages (Legacy)
          • Migrating Legacy Pages
          • Tips When Designing (Legacy)
      • Templates
      • The Component Library
      • Importing from Figma
    • Data
      • The database
        • Data types and fields
        • Creating, saving and deleting data
        • Finding data
        • Displaying data
        • Protecting data with privacy rules
        • The database editor
        • Export/import data
          • Exporting data
          • Importing data (CSV)
        • Working with location data
        • Using Algolia
        • Database structure by app type
          • Marketplace Apps
          • Directory & Listings Apps
          • Social Network Apps
          • SaaS Apps
          • Project Management Apps
          • CRM Apps
          • Professional Services Apps
          • On-demand Apps
          • Documentation/ CMS Apps
          • Applicant Tracking System (ATS) Apps
          • Portfolio Apps
          • Gallery Apps
          • Online Store / Ecommerce Apps
          • Blog Apps
          • Messaging App
          • Dashboards
          • Building Block Apps
          • Bubble as a backend
      • Files
      • Images
      • Static data
        • App texts (translations)
        • Option sets
      • Temporary data
        • Custom states
        • URL parameters
      • User accounts
        • Authentication plugins
          • Facebook plugin
          • Fitbit plugin
          • Google plugin
          • Instagram plugin
          • LinkedIn plugin
          • Pinterest plugin
          • Slack plugin
          • Wistia plugin
          • YouTube plugin
        • Cookies set by Bubble
      • Time, dates and time zones
    • Logic
      • The frontend and backend
      • Workflows
        • Events
          • Frontend events
            • Recurring workflows
            • Custom events
          • Backend events
            • Database trigger events
        • Actions
        • API Workflows
      • Dynamic expressions
      • Conditions
      • Navigation
        • Single-page applications (SPA)
        • Multi-page applications
        • Page slugs
    • Workload
      • Understanding workload
        • Activity types
        • The workload calculation
        • Client-side and server-side processing
      • Tracking workload
        • Measuring
          • Using App Metrics
        • Monitoring
          • Workload notifications
          • Infinite recursion protection
      • Optimizing workload
        • Optimization framework
        • Optimization checklist
          • Page load
          • Searches
          • Workflows and actions
          • Backend workflows
        • Agency showcases
          • Minimum Studio
          • Neam
          • Support Dept
    • Security
      • Bubble's security features
      • Planning app security
      • Client-side and server-side
      • Bubble account security
      • App security
      • Page security
      • Database security
      • API security
        • API Connector security
        • Data API security
        • Workflow API security
      • Flusk
        • Overview
        • Flusk plan features
        • Getting started with Flusk
        • Flusk security tools
          • The Issues Explorer
          • Issue details
          • Tools and settings
            • Pages rating
            • Database rating
        • Flusk FAQ
      • Cookies
      • Security checklist
    • Publishing your app
      • Web app
      • Native mobile app
        • Global native mobile settings
        • iOS App Store
        • Google Play Store
        • Publishing FAQ
    • AI
      • Generate apps with AI
        • About AI app generation
      • AI page designer
      • Connect to AI agents
    • Maintenance
      • Collaborators
      • Version control
        • Best practices: Version control
        • Transitioning from the legacy version control
        • Terminology: Version control
        • Version Control (legacy)
      • Commenting
      • Database maintenance
        • Copying the database
        • Restoring database backups
        • Bulk operations
          • Bulk operation methods compared
        • Wiping change history
      • Performance
        • Hard limits
        • Capacity Usage (legacy)
        • Notes on queries
      • SEO
        • Introduction to SEO
        • SEO: App
        • SEO: Page
      • Testing and debugging
        • Introduction to testing and debugging
        • The debugger
        • The server logs
        • Supported browsers
      • API workflow scheduler
    • Integrations
      • API
        • Introduction to APIs
          • What is a RESTful API?
        • The Bubble API
          • Bubble API terminology
          • Authentication
            • How to authenticate
            • No authentication
            • As a User
            • As an admin
          • The Data API
            • Data API Privacy Rules
            • Data API endpoints
            • Data API requests
          • The Workflow API
            • Workflow API privacy rules
            • Workflow API endpoints
            • API workflows
              • Creating API workflows
              • Scheduling API workflows
              • Recursive API workflows
              • API Workflow Scheduler
              • Case: Stripe notifications
        • The API Connector
          • Authentication
          • API Connector security
          • API guides
            • OpenAI
              • Authentication
              • Calls
                • ChatGPT
                  • Chat
            • Google Translate
              • How to setup Google API keys
          • Streaming API
        • API security
        • Plugins that connect to APIs
        • API Glossary
      • Plugins
        • What Plugins Can Do
        • Installing and using Plugins
        • Authentication plugins
        • Special Plugins
      • SQL Database Connector
      • Bubble App Connector
      • WorkOS
        • WorkOS SSO
        • WorkOS API
    • Infrastructure
      • Sub-apps
      • Bubble release tiers
      • Hosting and scaling
        • How Bubble hosting works
        • Scaling with Bubble
        • CDN (Cloudflare)
        • Bubble app names
        • Domain and DNS
      • Compliance
        • GDPR
        • SOC 2 Type II
        • HIPAA
        • Other frameworks and standards
    • Bubble for Enterprise
      • Hosting and infrastructure
        • Dedicated instance
          • The Dedicated editor experience
          • Technical specs
          • Main cluster dependencies
          • Customizable options
          • Migration process
            • Pre-migration
            • During migration
            • Post-migration
      • Security and compliance
        • Single sign-on (SSO)
        • GDPR
        • SOC 2 Type II
        • HIPAA
        • Other frameworks
        • Bubble's security features
      • Admin and collaboration
      • Priority support
      • Billing and Payment Guideline for Dedicated Instances
  • Core Reference
    • Using the core reference
    • Bubble's Interface
      • Design tab
      • Design tab (Legacy)
      • Workflow tab
      • Data tab
      • Styles tab
      • Styles tab (Legacy)
      • Plugins tab
      • Settings tab
      • Logs tab
      • Template tab
      • Toolbar
      • Top and context menu options
      • Deployment and version control
        • Deployment & Version Control Dropdown (legacy)
      • Notes
    • Elements
      • General properties
      • General properties (Legacy)
      • Styling properties
      • Styling Properties (Legacy)
      • Responsive Properties
      • Responsive Properties (Legacy)
      • Conditional formatting
      • States
      • Page Element
        • Page Element (Legacy)
      • Visual Elements
      • Containers
      • Container Layout Types
      • Containers (Legacy)
      • Input Forms
      • Reusable Elements
      • Element Templates (legacy)
    • Workflows
    • Events
      • General events
      • Element events
      • Custom events
      • Recurring event
      • Database trigger event
    • Actions
      • Account
      • Navigation
      • Data (things)
      • Email
      • Element
      • Custom
    • Data
      • Data Sources
      • Operators and comparisons
      • Search
      • Privacy
    • Styles
    • API
      • The Bubble API
        • The Data API
          • Authentication
          • Data API endpoints
          • Data API requests
        • The Workflow API
      • The API Connector
        • Authentication
        • Adding calls
    • Bubble-made Plugins
      • AddtoAny Share Buttons
      • Airtable
      • API Connector
      • Blockspring
      • Box
      • Braintree
      • Bubble App Connector
      • Chart.js
      • Circle Music Player
      • Draggable Elements
      • Dropzone
      • Facebook
      • Fitbit
      • Full Calendar
      • Google
      • Google Analytics
      • Google Optimize
      • Google Places
      • Ionic Elements
      • iTunes
      • Slidebar Menu
      • LinkedIn
      • Localize Translation
      • Mixpanel
      • Mouse & Keyboard Interactions
      • Multiselect Dropdown
      • Progress Bar
      • Rich Text Editor
      • Rich Text Editor (Legacy)
      • Screenshotlayer
      • SelectPDF
      • Slack
      • Segment
      • Slick Slideshow
      • SQL Database Connector
      • Star Rating
      • Stripe
      • Tinder-like Element
      • Twitter
      • YouTube
      • Zapier
    • Application Settings
      • App plan
      • General
      • Domain / email
      • Languages
      • SEO / metatags
      • API
      • Collaboration
      • Sub-apps
      • Versions
  • Account & Marketplace
    • Account and billing
      • Pricing and plans
        • Plans and billing
        • Billing cycle
        • FAQ: Pricing and Workload
      • Account Management
      • Building Apps for Others
      • Selling on the Marketplace
      • Plans & Billing (legacy)
    • Official Bubble Certification
      • Hiring certified developers
    • Building Plugins
      • The Plugin Editor
      • General Settings
      • Updating to Plugin API v4
      • Adding API Connections
      • Building Elements
      • Building Actions
      • Loading Data
      • Publishing and versioning
      • Github Integration
    • Building Templates
    • Application and data ownership
    • Marketplace policies
    • Bug reports
  • Vulnerability Disclosure Policy
  • Beta features
    • About the Beta features section
    • Native mobile apps 🔒
      • Introduction
        • What is a native mobile app?
        • Native mobile vs. web development
        • Differences in native and web elements
        • Native mobile app terminology
      • Building
        • Views and navigation
        • Native mobile actions
        • Components and gestures
        • Device resources
          • Location services
          • Camera/photo library
      • Previewing
      • Publishing
Powered by GitBook
On this page
  • Using elements to build a user interface
  • Visual elements
  • Containers
  • Input forms
  • Element behavior
  • Conditions
  • Workflows
  • Naming elements
  • Finding elements
  • The element picker
  • Using mouse clicks
  • Using the X-Ray feature
  • Using the element tree
  • The App Search Tool
  • Locking elements
  • Using the Inspector to find Element connections
  • Element security
  • Other ways to learn

Was this helpful?

  1. User manual
  2. Design

Elements

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

Last updated 23 days ago

Was this helpful?

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:

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:

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.

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

Containers

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 serve 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:

Input forms

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:

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

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:

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.

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.

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

Check out out for information and inspiration.

Article:

Article series:

Article series:

Article:

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

Article:

The Inspector gives you a useful look at different types of connections to the element you are looking at.

plugin store
Visual elements
Containers
Input forms
Conditions
Building workflows
Quick tip: Naming your elements
The search tool
How to find anything using the app search tool
Searching for elements
How to swap element positions
Group
Repeating group
Table element
Popup
Floating group
Group focus
Multiline text
Checkbox
Rich text
Dropdowns
Search box
Date/time picker
Elements
The element hierarchy
Combining different elements like input fields and buttons is how you design your app and give your users different ways to interact with it.
A page like this signup form is done by combining different elements like text, input fields, links and buttons to set up an interface that users understand and find useful.
Visual elements let you design your page to display information and accept clicks. All the elements in this example are visual elements: text, an image and a button respectively.
Groups can be used both to organize elements like the form above, and to hold the data that you want to work with, such as a user. The group is highlighted with a dashed border in the example.
A workflow consists of an event and a chain of actions. The event is often triggered by an element on a age such as a button.
You can chain multiple actions together after a button click. In the example above we're saving some changes on the user and then showing a success message.
The element picker is the fastest way to search for and select an element.
The App Search tool lets you search for specific element types and the text they contaon – even across pages.
Text input
Picture uploader
File uploader
Radio buttons
Slider input