Bubble Docs
Search…
Container Layout Types
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.
The new container layouts and their controls are outlined below and include sub-sections for Parent container and Child element controls.
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.

Parent Controls

​
​

Width & Height

See Shared Controls​
Additional controls will be available dependent on the parent container of this element.

Child Controls

​
​

Width & Height

See Shared Controls​

X & Y Position

See Shared Controls​

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.
Drag and drop positioning / resizing of existing child elements is not allowed. Instead, the position and size of child elements are controlled in the property editor. As the parent container resizes, child elements will remain aligned to their respective nonant and can overlap each other.

Parent Controls

​
​

Width & Height

See Shared Controls​
Additional controls will be available dependent on the parent container of this element.

Child Controls

​
​

Pin to nonant selection

Select which nonant this element should be pinned to. The element will stay pinned there as the parent container resizes.

Width and Height

See Shared Controls​

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.
Drag and drop positioning / resizing of existing child elements is not allowed. Instead, 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

​
​

Container alignment

This control defines how the child elements will be aligned with respect to the parent container.

Left-aligned

Child elements will align to the left edge of the parent.

Centered

Child elements will align to the center of the parent.

Right-aligned

Child elements will align to the right edge of the parent.

Space around

Child elements will receive even spacing between the edges of the parent container and each other.

Space between

Child elements are placed at the start and end of a container with even spacing between elements

Width & Height

See Shared Controls​
Additional parent controls will be available dependent on the parent container of this element.
Child controls
​
​

Vertical alignment

Top-aligned

Child element will align to the top edge of the parent container

Centered

Child element will align to the center of the parent container

Bottom-aligned

Child element will align to the bottom of the parent container

Vertical stretch

Child element will stretch to its max height (or height of the parent container, whichever is smaller). This option is disabled if Make this element fixed-height is checked.

Order selection

Make first

Move this element to the first position in the row.

Previous

Move this element one position to the left in the row.

Next

Move this element one position to the right in the row.

Make last

Move this element to the last position in the row.

Width and Height

See Shared Controls​

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.
Drag and drop positioning / resizing of existing child elements is not allowed. Position and size are instead controlled in the property editor.

Parent controls

​
​

Width & Height

See Shared Controls​
Additional parent controls will be available dependent on the parent container of this element.

Child controls

​
​

Horizontal alignment

Left-aligned

Child element will align to the left edge of the parent.

Centered

Child element will align to the center of the parent.

Right-aligned

Child element will align to the right edge of the parent.

Horizontal stretch

Child element will stretch vertically to its max width or the width of its parent container (whichever is less). This option is disabled if Make this element fixed-width is checked.

Order selection

Make first

Move this element to the first position in the row.

Previous

Move this element one position to the left in the row.

Next

Move this element one position to the right in the row.

Make last

Move this element to the last position in the row.

Width & Height

See Shared Controls​
Last modified 2mo ago