Bubble introduced a new responsive engine in 2021. If you have an older app, you may still see the legacy engine and its properties. We recommend that you update your app to the new responsive engine. The documentation for the legacy responsive engine is available in the link below.
Article series: Responsive design (legacy)
The UI builder
The UI Builder is your workspace for crafting and tweaking visual components on your app's pages.
Using Bubble's intuitive WYSIWYG editor, you can visualize how elements will appear to your app's end-users. As you design, keep in mind that elements, including containers and visual elements, come with layout settings to ensure responsive designs.
By default, every Bubble app includes certain pages such as the 404 page, displayed when users access a non-existent URL on your app, and the reset_pw page for password resets. To manage multiple pages or dive into reusable components, navigate using the dropdown on the top left of the top bar.
Article series: Design
The element tree
The element tree displays all the components present on the page. Indentation indicates a hierarchy, where an element resides within a container. Note that elements can be nested multiple times, like groups inside groups, and so on.
The element tree shows all elements on the page in a hierarchy.
Article: The element tree
The element pallet
The element pallet lists all the elements that you can place on the page. Bubble comes with a long list of different elements, and more can be added with plugins.
The element pallet contains all the different types of elements you can add to the page.
Elements are divided into categories for easy navigation:
Visual elements
Containers
Input forms
Reusable elements
You can also use the search bar to quickly find the element you are looking for. To place an element on the page:
Drag the element from the element pallet
Click the element in the element pallet and then "draw" it on the page
Article series: Elements
Responsive
You can switch the Design tab from UI Builder mode to the Responsive mode. 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.
Switching between Design mode and Responsive mode lets you tweak the page's responsive behavior.
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.
The responsive type will also show you the current size of the selected element as well as its parent.
Article series: Responsive design
Other ways to learn
Related articles
Related articles
Design
This section covers how to place elements on the page, tweak their settings and layout properties and how the different element types work.
Article series: Design
Responsive design
This section covers how you set your app up to behave on different devices and screen sizes. The core reference entry covers the different responsive properties available.
Article series: Responsive design
Reference: Responsive properties
Previewing your app
For every change you make, you can preview your app in the Development Environment.
Article: Previewing your app
Core reference
Core reference