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.
Prerequisites
- 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
Add a Row container as the page wrapper
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.
Create the left and right panels
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.
Style each panel and add content
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.
Make the layout collapse on mobile
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.
Add a toggle to show or hide the left panel
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 working example
1SPLIT-SCREEN LAYOUT — WORKFLOW SUMMARY2=======================================34PAGE STRUCTURE:5 Page (Column layout, 100% width)6 └── Row Container (100% width, 100vh min-height)7 ├── Left Panel Group (Column layout)8 │ - Min-width: 300px9 │ - Max-width: 50%10 │ - Vertical scroll: enabled11 │ - Collapse when hidden: checked12 │ - Conditional: When sidebar_visible is no → visible = no13 │ └── [Navigation / List content]14 └── Right Panel Group (Column layout)15 - Min-width: 300px16 - Max-width: 100%17 - Vertical scroll: enabled18 ├── Toggle Button / Icon19 └── [Main content area]2021CUSTOM STATE:22 Element: index (page)23 State name: sidebar_visible24 Type: yes/no25 Default: yes2627WORKFLOW:28 Event: When Toggle Button is clicked29 Action: Set state of index → sidebar_visible = index's sidebar_visible is no3031RESPONSIVE:32 Mobile breakpoint (<480px):33 - Left Panel: visible = no (conditional) OR relies on Row wrapping34 - Toggle Button: always visible on mobileCommon mistakes when building a split-screen layout in Bubble
Why it's a problem: Using Fixed layout instead of Row for the parent container
How to avoid: Always set the parent container layout to Row for horizontal split-screen arrangements
Why it's a problem: Setting exact pixel widths on both panels
How to avoid: Use percentage-based max-width values (like 50%) combined with pixel min-width values
Why it's a problem: Forgetting to check Collapse when hidden on the left panel
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am building a Bubble app and need a split-screen layout with a sidebar on the left and main content on the right. The sidebar should be collapsible and the layout should stack on mobile. Can you describe the exact element structure and responsive settings I need?
Create a split-screen layout on this page with a left sidebar panel and a right main content panel. Make the sidebar collapsible with a toggle button and stack the panels vertically on mobile devices.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation