Design tab
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 editor, you can visualize how elements will appear to your app's end-users. As you design, keep in mind that , including and visual elements, come with layout settings to ensure responsive designs.
By default, every Bubble app includes certain 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.
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.
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.
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
Last updated
