# How to build a split-screen layout in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 10-15 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

A split-screen layout in Bubble uses a Row container with two child groups set to 50% width each. This tutorial shows you how to build side-by-side panels that resize proportionally across screen sizes, perfect for dashboards, email-style interfaces, and comparison views.

## Overview: Split-Screen Layouts in Bubble

Split-screen layouts divide your page into two equal or proportional panels displayed side by side. They are commonly used for dashboards, email clients, and comparison tools. This tutorial walks non-technical builders through creating a responsive split-screen using Bubble's Row container type, min/max width settings, and breakpoint-specific visibility rules.

## Before you start

- A Bubble account with an app using the responsive engine
- Basic familiarity with the Design tab and Element Tree
- Understanding of Groups and container layout types

## Step-by-step guide

### 1. Add a Row container as the page wrapper

Open your page in the Design tab. Click the '+' icon in the element palette and search for 'Group.' Drag a Group onto the page. In the Property Editor, set the Layout to 'Row.' Set the width to 100% (min and max) and the height to fit the content or a fixed viewport height. This Row container will hold your two side-by-side panels.

> Pro tip: Set the Row container height to 100vh using min-height in the Layout tab to create a full-screen split that fills the browser window.

**Expected result:** A full-width Row container appears on your page, ready to hold child elements side by side.

### 2. Create the left and right panels

Inside the Row container, add two Group elements. Click '+' and drag a Group into the Row. Repeat to add a second Group. Select the first Group and set its min-width to 300px and max-width to 50%. Do the same for the second Group. Both groups should now sit side by side, each taking half the available width. Set the Layout of each child Group to 'Column' so their internal content stacks vertically.

**Expected result:** Two Groups appear side by side inside the Row container, each occupying roughly half the page width.

### 3. Style each panel and add content

Select the left panel Group. In the Appearance tab, add a background color or border-right to visually separate the panels. Add elements inside each panel — for example, a navigation list or menu in the left panel and a detail view in the right panel. To enable scrolling within a panel without scrolling the whole page, check 'Allow vertical scrolling when content overflows' on each Group.

> Pro tip: Add a 1px border-right on the left panel rather than a gap between panels for a cleaner divider look.

**Expected result:** Both panels are visually distinct with content and independent scrolling.

### 4. Make the layout collapse on mobile

Click the Responsive tab at the top of the editor. Select the mobile breakpoint (around 320-480px). Select the Row container and observe how the two Groups behave. Since Row containers wrap children that exceed the parent width, your panels will automatically stack vertically on narrow screens. If you want to hide the left panel entirely on mobile, select it, go to the Conditional tab, and add a condition: 'When Current page width < 480: This element is visible = no.' Check 'Collapse when hidden' on the left panel.

**Expected result:** On mobile screens the layout either stacks vertically or the left panel hides, giving the right panel full width.

### 5. Add a toggle to show or hide the left panel

For an interactive split-screen, add a Button or Icon element at the top of the right panel labeled 'Toggle Sidebar.' Create a custom state on the page called 'sidebar_visible' of type yes/no, default yes. In the Workflow tab, add a workflow: When Toggle Button is clicked → Set state of index to sidebar_visible = index's sidebar_visible is 'no.' On the left panel Group, add a Conditional: When index's sidebar_visible is 'no' → This element is visible = no. Check 'Collapse when hidden' on the left panel.

> Pro tip: Use a hamburger icon on mobile and a left-arrow icon on desktop for the toggle button by adding conditional icon changes.

**Expected result:** Clicking the toggle button hides or shows the left panel, and the right panel expands to fill the space.

## Complete code example

File: `Workflow summary`

```text
SPLIT-SCREEN LAYOUT — WORKFLOW SUMMARY
=======================================

PAGE STRUCTURE:
  Page (Column layout, 100% width)
  └── Row Container (100% width, 100vh min-height)
      ├── Left Panel Group (Column layout)
      │   - Min-width: 300px
      │   - Max-width: 50%
      │   - Vertical scroll: enabled
      │   - Collapse when hidden: checked
      │   - Conditional: When sidebar_visible is no → visible = no
      │   └── [Navigation / List content]
      └── Right Panel Group (Column layout)
          - Min-width: 300px
          - Max-width: 100%
          - Vertical scroll: enabled
          ├── Toggle Button / Icon
          └── [Main content area]

CUSTOM STATE:
  Element: index (page)
  State name: sidebar_visible
  Type: yes/no
  Default: yes

WORKFLOW:
  Event: When Toggle Button is clicked
  Action: Set state of index → sidebar_visible = index's sidebar_visible is no

RESPONSIVE:
  Mobile breakpoint (<480px):
  - Left Panel: visible = no (conditional) OR relies on Row wrapping
  - Toggle Button: always visible on mobile
```

## Common mistakes

- **Using Fixed layout instead of Row for the parent container** — Fixed layout uses absolute positioning and does not arrange children side by side responsively Fix: Always set the parent container layout to Row for horizontal split-screen arrangements
- **Setting exact pixel widths on both panels** — Pixel widths do not adapt to different screen sizes and will cause horizontal overflow Fix: Use percentage-based max-width values (like 50%) combined with pixel min-width values
- **Forgetting to check Collapse when hidden on the left panel** — Without this setting, hiding the panel still leaves empty space in the layout Fix: Select the left panel Group, go to Layout properties, and check 'Collapse when hidden'

## Best practices

- Use Row containers for any side-by-side layout in Bubble's responsive engine
- Set min-width on panels to prevent them from becoming too narrow on medium screens
- Enable vertical scrolling on each panel independently for dashboard-style interfaces
- Use Collapse when hidden to reclaim space when panels are toggled off
- Test your layout at every breakpoint using the Responsive tab before deploying
- Keep heavy data-loading elements in the right (main) panel to prioritize visible content
- Use a reusable element for the sidebar so it can be shared across multiple pages

## Frequently asked questions

### Can I make the panels unequal widths like 30/70?

Yes. Set the left panel max-width to 30% and the right panel max-width to 70%. Adjust the min-width values to ensure neither panel becomes unusable on smaller screens.

### Will the split-screen work on the Free plan?

Yes. The responsive engine and Row containers are available on all Bubble plans including Free.

### How do I add a draggable divider between the two panels?

Bubble does not natively support drag-to-resize panels. You would need a custom JavaScript plugin that adjusts the panel widths dynamically based on mouse position.

### Can I nest a Repeating Group in one of the panels?

Absolutely. Repeating Groups work inside any Group container. Place it inside the left or right panel and set its data source as usual. Enable scrolling on the panel to handle long lists.

### What if I need three panels instead of two?

Add a third Group inside the Row container. Set each to max-width 33%. The Row container supports any number of child elements arranged horizontally.

### How can I keep the left panel fixed while the right panel scrolls?

Use a Floating Group for the left panel instead of a regular Group inside the Row. Floating Groups stay fixed on the page while other content scrolls. Position it on the left and offset the right panel content accordingly.

### Can RapidDev help me build a complex dashboard layout?

Yes. RapidDev specializes in building custom Bubble applications including complex multi-panel dashboards with advanced responsive behavior and data visualizations.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/add-a-split-screen-layout-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/add-a-split-screen-layout-in-bubble