Bubble Docs
Search…
⌃K

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

Additional controls will be available dependent on the parent container of this element.

Child Controls

Width & 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 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 & 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.
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

Row gap (px)

Column gap (px)

Width & Height

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

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.
Position and size are instead controlled in the property editor.

Parent controls

Container alignment

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

Top-aligned

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

Centered

Child elements will align to the center of the parent.

Bottom-aligned

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

Space around

Child elements will receive even vertical 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 vertical spacing between elements

Row gap (px)

Width & Height

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 horizontally 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