Building responsive pages and views

Every page or view you build in Bubble is made up of a hierarchy of parent-child relationships. The page (or view, if you're building for native mobile) is the parent of every element on it. Inside that page, you can place containers, elements that hold other elements and become the parent of whatever's inside them.

For example, if you group a set of input fields and a button together, that group is the parent, and the input fields and button are its children.

Containers can also contain other containers, which makes the outer one the parent of the inner one. You can nest as many levels of this parent-child relationship as your design needs. This structure is the foundation of responsive design in Bubble: how a page or view rearranges itself as the screen size changes.

Setting up responsive behavior means combining two sets of settings: the ones on the parent container, and the ones on the element itself.

If an element sits directly on the page, the page is its parent container. If it sits inside a group or other container, that container's settings apply to it instead.

Together, these two layers of settings give you precise control over how a design adapts to any screen.

Every container, including the page itself, has a layout setting in the Layout tab of the property editor. This setting acts like a set of instructions, telling every element inside the container how to position itself.

Where an element ends up depends on three things:

There are four layout modes available on container elements:

Column layout stacks child elements on top of each other, regardless of how wide each one is.

If a container's height is set to fit its content, that height adjusts automatically as elements are added or made visible. For this to work as expected, you'll need to set a minimum and maximum height on the container.

New child elements are added to the bottom of the column by default, but you can reorder them using the Order controls in the element property editor's Layout section or by dragging and dropping on the canvas directly or in the element tree.

Column layouts are useful when you need to stack elements vertically (on top of or underneath each other).

Row layout lines up child elements horizontally, one after another. As the screen resizes or the total width of the elements exceeds the container's width, the elements wrap onto the next line.

New child elements are added to the end of the row by default, but you can reorder them using the Order controls in the element property editor's Layout section or by dragging and dropping on the canvas directly or in the element tree..

Row layouts are useful when you need to arrange elements horizontally (side by side).

Align to parent divides the parent container into a nine-cell grid and lets you align child elements to any of those cells: upper-left, upper-middle, upper-right, and so on.

When you create a new child element or drag one in, it automatically snaps to the nearest cell.

You can also set its position directly from the property editor, where each of nine arrows represents one of the cells.

If you place multiple elements in the same cell, such as the top-left, they may overlap. To position them relative to each other, place them inside a second container and set a different layout mode for that container.

Align to parent is useful whenever you need an element to stick to a specific side or part of its parent, including its corner and center.

Fixed layout lets you move and place an element freely within its parent container. You set its position using an absolute X and Y pixel value, and its size using a width and height value. That position is relative to the parent: the element sits exactly X and Y pixels from the top-left corner of the parent container.

Fixed layout can come in handy for specific design needs, but it's harder to manage across different screen sizes and resolutions.

Fixed layout is useful in a few specific scenarios:

In row and column layouts, you can also set alignment: where should the row or column start? In a column layout, for example, elements stack on top of each other. Should that stack start from the top of the container, or the bottom?

Alignment controls both where a group of elements starts and how they're spread out across the parent container.

In the illustration below we have two groups, both with a row layout. The top one is aligned to the left, and the bottom one is aligned to the right. Adding more elements will grow in a left-to-right direction or right-to-left direction.

The settings covered so far live on the parent container and affect every child inside it. But each individual element also has its own layout settings, which only affect that element.

On any element, you can control:

These settings give you the freedom to fine-tune how an individual element behaves within the boundaries its parent container sets. For example, a container's layout mode might be set to column, making its children stack vertically, while each child's own width setting still controls how wide it is.

The basic definition of responsive behavior is that the content on a page or view adapts to changes in screen size. This can happen once, when the app loads on a given screen size, or dynamically, as the size changes, such as when a user resizes a browser window.

A broader, more useful definition for you as the developer is this: responsive behavior means making an app easy to use on any given screen size, not just adaptable to it. This distinction matters. Think about an app you've used that has both a desktop version and a mobile web version or native app. The experience can differ quite a bit. A common example is a left-hand navigation menu: it works well on a desktop browser, where the screen is wide, but poorly on a mobile device, where the screen is narrow and the menu might cover everything else.

In this section, we'll cover some common scenarios and methods you can use to optimize your app for both. These aren't strict best practices, more useful starting points, so stay open to finding your own creative solutions for whatever challenge you run into.

The obvious, and frequently used, solution is to resize elements so they shrink and grow along with the browser window or screen. Depending on their configuration, most elements will do this automatically.

What you may need to adjust is their minimum and maximum width. Say you have a form in the center of the viewport that shrinks just fine, but stops shrinking once it hits a certain point. That's its minimum width at work. The same idea applies to maximum width: some elements fill the whole viewport, while others are deliberately kept at a much smaller size.

The same principle applies to height, in theory. But unlike the horizontal axis, the vertical axis is often scrollable, which removes most of the need for resizing.

Resizing can be set as a pixel value, or as a percentage of the parent's width.

Some elements you'll want to retain a fixed width no matter what the size of the viewport is. For example, you maye have a specific design that only "works" when the container has an exact pixel value as width. In that case, you can choose to set the width of that specific element or container to fixed.

Select the element or container so that the element property editor opens. Go to the Visual tab and scroll to the Size section.

In the Size section, find set the Width type to Fixed and then set the value you want.
​

Another common method to preserve a responsive design is to hide and show element based on the page width. Below, you can see a common design pattern: a two-column layout

Many desktop apps divide their UI into two or three columns. The first column, and the third if there is one, tends to be narrow, while the remaining column holds the actual content of the page. A common pattern when the page/view width is below a specific breakpoint, is to hide the left bar altogether.

Hiding is done by using conditionals.

Make sure you select the container that holds all the elements in the left bar.

In the element property editor, go to the Conditional tab and click the + symbol to create a new condition. Give it a suitable name, such as Hide on small screen.

Set up the dynamic expression that checks the width of the page. It's common to use the ≤ symbol, which means "less than or equal to". This makes sure that the conditional triggers exactly at the breakpoint.

In a web app:

In a mobile app:

Click + Select a property to change to add a property, and select This element is visible. Disable it, since we want the bar to be hidden when this conditional is true.

In the element property editor, go to the Interaction tab and ensure Collapse when hidden is enabled. This ensures the element's width and height is reduce to 0 when hidden, leaving room for other elements. In this example, it makes more room for the right column, which holds the page's content.

Optionally, you can replace the menu with an option more suitable for a small screen, For example, you can use the Bubble-made Slidebar menu plugin.

Sometimes, you'll have a three-column layout, as illustrated below:

Typically, this will be menu on the left side, and some sort of information, metadata or for the right one. It may be enough in this case to hide the left menu, and perhaps some resizing of the right drawer. However, on mobile screens, you may need to hide it altogether, and find another way to display the info to the use. For example, you can:

When you have elements in a row (container layout set to row), their total width can sometimes exceed the available width as the viewport shrinks. When that happens, the elements automatically wrap onto a new row.

It can be useful to control the gap between elements once they wrap, so they don't end up crammed together vertically. To do this, use the Gap property.

Select the container that holds the element (not the element itself), to open the element property editor.

Navigate to alignment, and you'll see the spacing section. The Gap property automatically applies a vertical gap to all elements within the container. Optionally, you can add a horizontal gap between the elements too.

When you have a wide viewport, margin and padding are useful ways to add whitespace. As the viewport shrinks, though, it can help to reduce or remove those properties, so you make better use of the space you have.

For example, say you have a group containing your app's main content, with a 50PX margin to give it some airy, comfortable whitespace on a desktop screen. On a narrow mobile screen, that same margin eats into space you can't spare, so you'd want to shrink or remove it at that breakpoint.

Click the group in the element tree or on the canvas to select it. Its properties will appear in the element property editor.

In the element property editor, click the Conditional tab. This is where you'll define rules that change the group's properties based on screen size or other conditions.

Click Add new conditional. In the When field, set the condition to check the current page/view width against a breakpoint;

In a web app:

In a mobile app:

With the conditional selected, find the Margin or Padding property and enter a smaller value, such as 10 px. This value only applies when the conditional's condition is true, so the group keeps its original margin on wider screens and switches to the smaller one on narrower ones.

If you have a group element where you want to control the height, you can let the content inside it scroll instead. The group gets a scrollbar of its own, which only appears when it's actually needed.

Click the container in the element tree or on the canvas to select it. Its properties will appear in the element property editor.

In the element property editor, click the Interaction tab.

In the Visibility section, enable Allow vertical scrolling. Content that exceeds the container's height will now scroll instead of overflowing or getting cut off.

Above the element tree, you'll find a tab that switches between the UI Builder, where you build and edit your page or view, and the responsive viewer, where you can test how it behaves across different screen widths, known as breakpoints.

In the responsive Viewer, drag the ruler at the top of the page area to resize it and watch your layout adjust in real time. You can also use the preset width icons to preview your page in mobile portrait, mobile landscape, tablet, and desktop sizes.

When you click on an element while in this view, the Layout tab in the property editor shows you the settings available to adjust its behavior at that breakpoint.

Every app comes with a default breakpoint plus four presets, and you can add custom breakpoints of your own. The default breakpoint matches the Default builder width value set for that page.

The four presets are:

You can use any breakpoint to test your layout in the Responsive Viewer, and as a data source for Current page width conditionals on any element.

All preset breakpoints appear on the page's toolbar by default. Any custom breakpoint gets added to the toolbar the first time it's used as a data source in a conditional on that page.

The breakpoints dropdown lists every preset and custom breakpoint available in your app.

Click the + symbol next to the existing breakpoints and select Add custom to create a new one.

You can edit any breakpoint from the toolbar or the breakpoints dropdown.

Editing a custom breakpoint updates its value everywhere it's referenced in your app. Editing a preset breakpoint, on the other hand, creates a new custom breakpoint and updates every reference to point to it instead.

You can remove a breakpoint from the toolbar without deleting it. It stays available as a data source elsewhere in your app, but is hidden from the toolbar. Click the dotted contextual icon next to the breakpoint and select Remove. To re-add it, click on the + icon and click on the breakpoint in the list.

Deleting a breakpoint from the dropdown removes it from your project. Any conditional referencing that breakpoint becomes unlinked, and the issue checker flags it so you can fix it. To delete a breakpoint, click the + icon to list all breakpoints. Hover the one you want to delete, and click on the trashcan.

Breakpoints become a data source, which means you can refer to it in dynamic expressions. The most common use case is in element conditionals. By comparing the data source Current page width with a breakpoint, you can apply a property to the element, such as hiding it or changing its padding.

This is more flexible than hardcoding pixel values to control responsive conditionals. For example:

In the first example, you will have to change the hardcoded pixel value in every dynamic expression that relies on it, and in the second you can simply edit the breakpoint and it applies everywhere.