Bubble Docs
Search…
Building Responsive Pages
Bubble pages can also be fully responsive. By mixing and matching Container Layout settings, your page layout can adjust to the width of the screen so that they look great on mobile devices. These Container Layout Types are Row, Column, and Align to Parent. In addition, responsive Container Layouts also come with layout settings for all of its child elements that determine its responsive behavior, giving you alignment and sizing controls for pixel perfect layouts. We'll dive into all of these Layout settings and how to use them in later sections.

Building responsive pages

The responsive behavior of a page and its elements is defined by the container layout type you choose. The container and its child elements will have different controls depending on the layout selected. Each container layout type has distinct behavior, so be sure to play around and choose the one that works best for your design. By manipulating the parent container and child element controls, as well as mixing and matching container layout types, you can build almost any page layout imaginable.
In general, it is helpful to start designing the page as it should appear on a wide screen, for instance your laptop. Then, once you are happy with the wide ("laptop") design, you can adjust the size of the editor canvas in the Responsive Viewer to see how your page scales as the screen width changes. Element layout properties can be adjusted from the UI tab or the Responsive tab as you build.

Using the Responsive Viewer

You will find a tab above the New Element palette that lets you switch between the UI Builder view, where you can modify elements, drag new ones, and delete some, and the Responsive Viewer which lets you test how your page behaves as the screen width changes. In this view, the ruler at the top of the page area defines the current page width. Just click or drag on the ruler to resize the page and see how the page behaves dynamically. You can also use the preset width icons on the left side of the screen to see how the page looks on iPhone in portrait mode, in landscape mode, on an iPad and on a laptop or a desktop. When you click on an element, the Layout tab in the Property Editor will display the different parameters you can modify to affect its behavior. Responsive behavior is defined by a parent container's layout type and the child element layout settings. Modify the different settings and you’ll see how it impacts the page in real time. These same Layout settings can also be adjusted in the UI Builder view as well.

Understanding Responsive Behavior

Container layouts define the behavior and positioning of its child elements. Container layout types are available on any container element (group, floating group, repeating group, etc.), including the page itself. Your page must be a responsive container type (ie not “fixed”) to be actually responsive to changes in screen size. Each container layout type has its own set of controls specific to that layout type. In addition, child elements will inherit unique controls depending on the parent container’s selected layout type. More on these controls can be found in the Core Reference
The new container layout types, their respective behaviors, and parent and child layout controls are listed below.
Note: Parent controls act on the container itself while the Child controls act on the child elements inside the parent container.

Fixed

The Fixed layout type defines a fixed width and height container with absolute positioning of its child elements. Child elements are positioned and re-sized by dragging and dropping as you are used to. A container that is fixed will not respond to changes in screen size or content size because what-you-see-is-what-you-get (WYSIWYG).

Parent Layout Controls

None

Child Layout Controls

  • Width and Height

Align to Parent

Child elements are aligned to a nonant in the parent container. A nonant is like a quadrant, but when a rectangle is divided into 9 parts instead of 4. New child elements drawn inside or dragged into an Align to Parent will snap to the nearest nonant.
The position and size of child elements are controlled in the property editor, though elements can be re-positioned by dragging and dropping. As the parent container resizes, child elements will remain aligned to their respective nonant and can overlap each other.

Parent Layout Controls

None

Child Layout Controls

  • Pin to Nonant Selection
  • Width and Height.

Row

Child elements in a row container are aligned horizontally. These child elements will wrap as the screen is resized or new elements are added. New child elements drawn inside the container will be added to the end of the list by default but can be re-ordered using the order controls or by dragging and dropping.
The position and size of child elements are controlled in the property editor.

Parent Layout Controls

  • Container Alignment
  • Row gap
  • Column gap

Child Layout Controls

  • Vertical Alignment
  • Order Selection
  • Width and Height.

Column

Content is aligned vertically. Child elements will stretch or push other elements down as screen or content is resized. New child elements drawn inside the container will be added to the end of the list but can be re-ordered using the order controls or by dragging and dropping.
The Position and size of child elements are controlled in the property editor.
Note: Child elements will grow to take up as much space as they can (within the limits of the max width setting) equally. For example, consider a parent row container that is 100px wide. It has two child elements with min widths of 20px and infinite max widths. These elements will grow to be 50px each. If we add a 3rd equal child element to that row, each element will shrink to 33.33 px wide.

Parent Controls

  • Row gap

Child Controls

  • Horizontal Alignment
  • Order Selection
  • Width and Height

Other

Note: Instagram technically uses its own browser, which is not officially supported by Bubble. Bubble pages will still load in Instagram's browser, but if this is a major use case for you, we recommend you test your pages on this browser first.
Note: If you reference a third-party library in the raw Javascript on a page to modify an element, the way the modified element updates responsively (i.e. as the screen width changes) might not behave as expected, so it's always a good idea to test it thoroughly.
Note: Elements that are wider than the width of the page it's on can lead to unexpected behavior with the responsive engine. Consider making all elements no wider than the page width.