By mixing and matching three basic container layouts, Bubble allows you to build any modern web layout based on the principles of CSS Flexbox. Each container layout has its own set of controls, and elements within those containers will inherit their parent container’s properties.

Make your content align vertically. The Column container lets your elements – text boxes, buttons, images and more – stretch or push other elements down as the screen is resized or the child element grows.

Make content that aligns horizontally. The Row container lets you wrap elements within the row as the screen is resized to become smaller for mobile layouts or as new elements are added. You can also adjust the entire container’s vertical alignment.

Make content that aligns to any side of a larger, parent container. New elements drawn inside or dragged into an Align to Parent container (child elements) will snap to the nearest nonant – like a quadrant, but with nine spaces.

Set the margins around all four sides of an element. Margins create extra space around an element, unlike padding, which creates extra space within an element.

Create custom padding on all four sides within your elements. This gives your elements a standard amount of space even as your page size changes.

Use gap controls to set consistent spaces between elements within the same parent group. Row gaps create horizontal spaces above and below elements, and column gaps create vertical spaces on the sides of elements.

Hundreds of responsive layouts are possible by combining and layering different containers. These are just a few: