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
  • What is a page?
  • Default pages
  • The index page
  • Setting an index page
  • The page URL
  • Creating a new page
  • Naming your pages
  • Cloning a page
  • Page properties
  • Appearance
  • Layout
  • Conditions
  • Organizing your pages
  • Adding a page to a folder
  • Navigating your folders
  • Frequently asked questions
  • Other ways to learn

Was this helpful?

  1. User manual
  2. Design
  3. Elements

The page

The page is the blank canvas on which you design your app's user interface.

Last updated 5 months ago

Was this helpful?

At the core of everything related to design and user interface in Bubble is the page.

This is the canvas on which you place , text, images, icons, videos and everything else that your users need to make use of your app.

What is a page?

No matter what kind of application you want to build, from a simple website to a complex eCommerce platform, the page remains the starting point for all your design and development efforts. You can see the page itself as the lowest level in the hierarchy of a page's structure, where every element you add to it is contained within that page.

What is a page's hierarchy structure?

A Bubble page is composed of three types of components:

  • The page The page is the top-level component of a webpage and is responsible for organizing the groups and elements on the page. The page is the top container for all elements

  • Groups: Groups are used to group elements together and control their layout. They can be thought of as "boxes" that hold other elements. They can be styled or they can be invisible to the user and can contain Elements and even other Groups to create a hierarchy. Groups are a major part of your page's design as they determine how your other elements behave. Groups are containers for elements and for sub-groups

  • Elements Elements are the actual content that your users see and interact with to work with your app, such as buttons, links, images, icons and input fields. Elements are the things that users interact with on the page

The way in which these components are organized and styled determines the overall layout and design. From a technical viewpoint they make up the page's hierarchy structure.

In a way, the hierarchy above is how your browser "sees" the page before rendering the results on the screen.

You can read more about the element hierarchy in the article below:

Default pages

When you create a new Bubble application, a few pages are included by default. These pages have a few traits in common:

  • They are always present when your app is created

  • You cannot change their names

  • You cannot delete them

index

404

The 404 page is where your users are taken if they type in an URL in the URL bar that includes your domain, but the page name they enter doesn't exist:

https://appname.bubbleapps.io/non-existing-page

The 404 is an that is used to tell your browser that the page doesn't exists.

You can use this page to tell your users that the page couldn't be found and point them in another direction.

reset_pw

This is the page to which your users are directed if they need to reset their password. They will most likely follow a link in a reset password email to this page.

The index page

The index page is the main page of your application – the first page that will load when a user types in your app's domain in the browser's URL bar. It's also the only page that can be displayed without showing the page's name.

For example, the below URL's would take you to the index page even if you are not including the page's name in the URL:

No custom domain

Version
URL

Development

https://appname.bubbleapps.io/version-test

Live

https://appname.bubbleapps.io

Custom domain

Version
URL

Development

https://www.mydomain.com/version-test

Live

https://www.mydomain.com

If your app has any custom set up in version control, the version-test part of the URL is replaced by the of the currently active branch.

Setting an index page

When you create an app in Bubble, the index page is created automatically. You cannot name another page index, but you can replace it by using the Make this page the new index function.

The old index page will be named old_index.

Video lesson

The page URL

Every page that you add automatically has a unique URL assigned that your users can access to visit that page, just like any other website. All pages follow the same URL pattern: by combining the root URL of your application with the name of the page:

No custom domain

Version
URL

Development

https://myapp.bubbleapps.io/version-test/page-name

Live

https://myapp.bubbleapps.io/page-name

Custom domain

If you have connected your app to a custom domain, the URL will look like this:

Version
URL

Development

https://mydomain.com/version-test/page-name

Live

https://mydomain.com/page-name

If your app has any custom set up in version control, the version-test part of the URL is replaced by the of the currently active branch.

Creating a new page

To create a new page, click the dropdown in the upper left corner of the Bubble editor, right next to the Bubble logo. In the dropdown, click Add a new page...

Naming your pages

You can create as many pages in your app as long as they have unique names. Keep in mind when naming pages that they need to be . Any non-URL safe strings you provide will automatically be .

A simple rule of thumb for page names is to only use the english letters a-z and numbers 0-9 and replace spaces with dashes. During URL encoding, Bubble will:

  • change the text to lowercase

  • replace spaces with -

  • replace special characters with _

Cloning a page

Cloning a page means to create an exact copy of that page under a new name. The entire page, including all elements and workflows will be copied.

There are two ways to duplicate a page:

By selecting Add new page...

... or by having the page you want to duplicate open in the editor and selecting Edit - Duplicate this page:

Regardless of the method you choose, you will be asked to provide a name for the clone and confirm which page to clone in the page dropdown marked below:

Page properties

Each page can have their own individual settings configured that affects how that page looks and behaves. Settings are available in the Property Editor.

There are two ways to access the page settings:

  1. Double-click with the left mouse button anywhere on the page itself (avoid clicking on another group or element

  2. Clicking on the page in the page's

The page's settings are available in the Property Editor, as illustrated below:

Appearance

The Appearance tab lets you control the visual properties of the page, such as the background style and colors, as well as what kind of data the page should hold and its SEO metadata.

Layout

Conditions

Organizing your pages

Pages can be organized into folders in the Bubble editor to make them easier to find.

Organizing pages into folders makes it easier to find the pages you need to open in the editor, but they do not affect the URL or navigation experience of the page in your app.

Adding a page to a folder

To move a page into a specific folder, do the following:

  • Open the Property Editor for the page by double-clicking anywhere on the page itself (not on another group or element)

  • Pick a folder, or create a new one. You can leave the dropdown blank to remove it from a folder.

Navigating your folders

You will find all the folders you create in the upper right corner of the page navigator (which is located in the top left corner of the Bubble editor).

Video lessons

Frequently asked questions

Can I add page folders to my URL structure?

Can I publish and un-publish pages?

All pages are public, meaning that as soon as you have created one, they can be accessed in your app. Keep in mind that changes need to be deployed before they are visible in your live app – this applies to pages too.

If you'd like to keep the elements on a page but not make the page available to your users, you can convert the contents of the page into a r and store them there.

How do I navigate between pages?

Related articles

Other ways to learn

Core reference: page element settings
Video lessons

It helps to see it in a schematic form:

Article:

The index page is the main page of your app (more on that ).

Video:

You will be asked to provide a name for the new page and whether you want to .

For the full list of all the settings for the page, see our

The Layout tab lets you control the page's responsive properties, or how it's layout is structured and changes across different screen sizes. You can read more about layouts in our guide on .

The Conditions tab lets you change the and background styling if one or more certain are true. You can read more about this in our article on .

In the Property Editor, navigate to the Appearance tab and scroll to the bottom:

Video:

Bubble does not support page folders in your app's URL's. As such, all pages follow the same structure as .

To send a user to another page, you can use the action or the element.

Core reference:

Core reference:

Article section:

Article series:

Reference:

The element hierarchy
How to set a new index page
page settings core reference.
responsive design
Conditions
How to organize your pages in folders
Navigation
The page element
How to use the page element
How to set a new index page
How to organize your pages in folders
below
clone an existing page
described above
The link element
link
The link element
Go to page
Go to page
The page gives you a blank canvas on which to build your vision.
The 404 page can be edited freely just like any other page – but it can't be deleted.
The reset_pw page is a special page that lets your users reset their password safely. It's part of Bubble's core functionality and can't be removed or renamed.
You can give your page any name you want, as long as it's URL safe and unique in this application.
To clone a page, you can use the Add new page... menu item
You can also clone the page by selecting Duplicate this page while having the page you want to clone open in the editor.
Folders let you organize the pages in your app to make them easier to find. Folders do not affect the URL of the page in your Bubble app.