How to build a split-screen layout in Bubble

You build a split‑screen layout in Bubble by placing two Groups side‑by‑side inside a parent Group that uses row layout. Each side can have its own width rules, alignment, and responsive behavior. The entire effect comes from Bubble’s responsive engine: a parent container set to Row layout, and two child containers set to Fixed width or Percentage-based widths.

Core Structure

You need one main container and two child Groups. The parent handles horizontal alignment; the children hold your content. Bubble’s “container layout” controls how elements sit next to each other. A Row container makes elements sit left-to-right.

• Create a Group → turn on Make this element a container.
• Set its Layout type to Row.
• Set Min width low (like 0) so it stays flexible on smaller screens.
• Drop two Groups inside. These are your left and right panels.

Setting Width Behavior

Each side can be fixed or percentage-based. The most common pattern is 50/50 split. Bubble doesn’t allow direct percentage input but uses “Max width” and “Min width” relative to the parent.

• For each panel, uncheck Fixed width.
• Set both panels to the same Min width (for example 300px).
• Set both to Max width: 50% (Bubble’s percentage slider).

This forces Bubble to treat both sides equally and create a clean split.

Making It Responsive

If the screen gets too narrow, you may want the split to collapse into a vertical stack. You do this in the parent container.

• Open Responsive tab.
• Select the parent Group.
• Enable Wrap to next line.

Now when Bubble can’t keep them side-by-side, the right panel will drop below the left one.

Optional: Add Scroll Within One Side

If one panel has long content, set that Group’s Overflow to “Scroll”. This allows a true pane-within-a-pane layout.

// No code required; Bubble uses UI settings.
// Group > Layout > Overflow: scroll

Final Tips

• If edges touch too much, add padding inside each panel.
• If elements jump around, check whether any panel still has Fixed width enabled.
• For mobile, consider a breakpoint where you lower Max width from 50% to 100%.