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
  • 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
  • Adding elements
  • UI Builder
  • Opening the property editor for an element
  • Elements Tree
  • Drag and drop
  • Element palette
  • Adding elements
  • Element Inspector
  • Responsive
  • Responsive Breakpoints
  • Creating a new custom breakpoint
  • Editing breakpoints
  • Removing and deleting breakpoints

Was this helpful?

  1. Core Reference
  2. Bubble's Interface

Design tab

Last updated 10 months ago

Was this helpful?

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

The Bubble editor In this article series we cover all the different tabs and tools available in the Bubble editor.

Article series: Article:

Design In this article series we cover how to design your app – everything from element types to styling.

Article series:

This is the short-form core reference entry for the design tab where we cover the technical details of the interface. For a more in-depth article, see the link below:

Article:

This is where you design the visual appearance of the app. Draw elements on the page, drag and resize them, and adjust their properties and appearance.

Adding elements

To add a new element, click an element type in the palette on the left, then click and drag on the page to insert it. Double-clicking on an element reveals the Property Editor, where you can customize the element's appearance and behavior. Right-clicking on an element displays a drop-down menu with additional editing options.

UI Builder

The UI Builder is where you can add new elements to the page and modify any existing elements. Bubble pages are by default a "what you see is what you get" (WYSIWYG) editing experience - whatever you create in this tab is generally what an end-user of your app will see. Containers and Visual elements also have layout settings, which control a page or element's responsive behavior. When designing responsive pages, your page's layout will scale gracefully as the end user's screen gets larger or smaller.

Opening the property editor for an element

Double-clicking on an element reveals the Property Editor, where you can customize the element's appearance and behavior. Right-clicking on an element displays a drop-down menu with additional editing options.

This is also true for the page itself.

Elements Tree

Related articles
  • Article: How the Element tree works.

  • Article: Introduction to how elements on the page are sorted into a hierarchy that affects their look and responsive behavior.

The elements tree shows all the elements that currently exist on the page. Indentation signifies a parent/child relationship between a container and the contents of that container - remember that there can be multiple levels of nesting (e.g. groups within groups within ...)

Drag and drop

The elements tree also allows you to re-order and re-parent elements on the page by dragging and dropping items where you want them. Elements inside a group are ordered differently depending on the container layout type selected (more below).

Behavior

  • Clicking and holding an element will allow you to drag, and a line will appear to indicate where you will be dropping your element.

  • Groups will highlight when hovered to indicate that you are dropping within that group.

  • If you hover over a collapsed group for more than one second, it will expand automatically.

    • If you drag into a collapsed group, the element will default to be the last child in the list

  • Elements can be re-ordered within a parent container.

    • Fixed and Align to Parent containers sort their children by ascending z-index. Reordering within a Fixed or Align to Parent will change z-index.

    • Row and Column containers sort their children by ascending order. Reordering within a Row or Column will change the order of an element.

  • Elements can be moved from one parent container to another.

    • Into Fixed: The element that is dropped in will respect z-index and default to top left position.

    • Into Align to Parent: The element that is dropped will respect z index and default to top left position.

    • Into Row: The element that is dropped will respect the existing order.

    • Into Column: The element that is dropped will respect the existing respect order.

  • Draggable elements include containers nested within a parent container.

Limitations

  • We have disabled drag and drop for popups, group foci, and floating groups, as they rest above the page and cannot be nested into other groups. You can, however, drag other elements into these containers.

  • You may not drag a group into itself.

Element palette

Below the elements tree is the palette of all elements that you have access to for building your app. Bubble comes with many built-in element choices; you can also gain access to new elements via plugins.

The element palette is divided into a couple of sections for organization. Visual elements are ones that generally simply display something on the page. Container elements are elements that can contain other elements, including other containers. Input form elements generally allow the end-user to provide some kind of input, whether it be text, files, or something else.

Below that is the section of reusable elements available in the app. And at the bottom is a section of two special element templates: tab element and signup login form, which are two common user interfaces that might be helpful in your app.

Adding elements

To add a new element:

  • click an element type in the palette on the left

  • click and drag on the page to insert it

Element Inspector

Related articles

This slidable inspector shows a view of how the selected element is used on the page. Since an element can be used in many different places, such as in events, actions, or other elements, this centralized view is helpful.

The Element Inspector shows the element's custom states and allows you to modify, delete, and add a new state. The element's events and actions are also shown along with the other page elements referring to the current element.

Clicking on an entry takes you to the appropriate place in the Bubble Editor.

Responsive

Related articles

You can switch the Design tab from UI Builder mode to the Responsive sub-tab. Responsive settings refer to the configuration of how the page is displayed on varying screen widths - how the layout 'responds' to changing widths. As such, the Responsive tab allows you to quickly get a sense of how your page layout will respond depending on the screen size without previewing it live.

At the top of the left flyout of this sub-tab, there are shortcuts to snap the page width to different common screen widths, e.g. mobile portrait, mobile landscape, tablet and laptop. You can also change the page width to any arbitrary width using the ruler at the top.

Responsive Breakpoints

Your Bubble app comes with a Default breakpoint, four preset breakpoints, and the ability to add custom breakpoints. The Default breakpoint is equal to the Default builder width value that is set for that page.

The four presets are:

  • Mobile (320 px)

  • Mobile Landscape (768 px)

  • Tablet (992 px)

  • Desktop (1200 px)

You can use any of your app’s breakpoints to test the page behavior on the Responsive Viewer tab and as data sources to set “Current page width” conditionals on any element.

Creating a new custom breakpoint

You can create a new custom breakpoint by clicking “Add custom” within the breakpoints dropdown.

Editing breakpoints

You can edit any breakpoint on the toolbar or in the breakpoints dropdown.

Editing a custom breakpoint will edit the data source and update the breakpoint wherever it is referenced in the app.

Editing a preset breakpoint will create a new custom breakpoint and update any reference of the breakpoint to the new custom breakpoint.

eg. Changing the preset breakpoint Mobile from 320 px to 325 px will result in the creation of a custom breakpoint named Mobile (Custom) (325 px) and all references to Mobile will now reference Mobile (Custom) (325 px).

Removing and deleting breakpoints

You can remove any breakpoint from the toolbar, but this does not delete it as an available data source.

You can delete any breakpoint from the breakpoints dropdown. Deleting a breakpoint from the dropdown will remove it from any pages that are using it. This will in turn unlink it from any referenced conditionals and flag an issue in the issue checker to fix those conditionals.

Article: How the Element property inspector is accessed and how it works.

Article: Setting up pages in Bubble.

Article: Introduction to design and , and different tools and sites for inspiration.

The Bubble editor
The design tab
Design
The design tab
The element tree
The element hierarchy
The element property inspector
Responsive design
Design and UX | Building your first app