Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 18

Responsive Grouping & Page Structure

Recommended resources

In our last session, you got to grips with Bubble's responsive engine, learning how containers, layout properties, and conditional breakpoints work together. You now have the foundational tools to make a page adapt to different screen sizes. Today, we'll build on that by focusing on a technique that is arguably the most important for creating clean, scalable, and complex user interfaces: effective grouping.

This lesson is all about structure. Your experience with Elementor in WordPress has likely given you an intuition for nesting containers, and we're going to formalize and expand upon that within Bubble's powerful Flexbox system. Mastering grouping will not only make your responsive designs more robust but will also make your application easier to manage as your multi-tool platform grows. By the end of our time today, you'll be able to group elements effectively to control their responsive behavior and overall page structure.

Part 1: The "Why" of Grouping - Structure is Everything

In Bubble, groups are more than just visual boxes for organizing elements in the editor. They are the fundamental structural units that define relationships between elements. Every responsive layout is built upon a hierarchy of parent groups and their child elements.

Understanding this parent-child relationship is the first step. The Bubble Docs offer a concise explanation of this core principle.

Building responsive pages | Bubble Docs

This document explains the foundational concept of how elements are structured in Bubble.

Please read the first two short sections: Parent-child relationships, which introduces the core idea of nesting. Parent settings and element settings, which clarifies how a group's settings affect the elements inside it.

As the document highlights, there's a crucial distinction:

  • Parent Container Settings: Control the overall layout for all children inside (e.g., arrange them in a row, center them, add space between them).
  • Child Element Settings: Control the behavior of one specific element within the rules set by its parent (e.g., make this particular button fixed-width, align this text to the top).

To manage this hierarchy, your most important tool is the Elements Tree. This panel gives you a clear, top-down view of how all your elements are nested.

The Elements Tree shows the parent-child hierarchy of your page. Here, 'Group Typography' is the parent of the three text elements nested within it. Mastering this view is key to managing complex layouts.

Think of it this way: if a set of elements needs to move, stack, or behave as a single unit on different screen sizes, they must be placed inside a common parent group.

Part 2: Hands-On with Nested Groups

The best way to understand grouping is to see it in action. Complex layouts that you see on professional websites are rarely achieved with a single container; they are almost always built by nesting groups inside other groups, each with its own layout rules.

The following video from Bubble's official channel provides an excellent, step-by-step demonstration of building a nested layout from scratch. It perfectly illustrates the concepts we just discussed.

Layout and spacing: Getting started with Bubble (Lesson 1.4)

This video is a practical guide to using groups to organize elements and control their layout and spacing.

Please watch these segments carefully, and feel free to follow along in your own Bubble editor: Introduction to groups: Understand why groups (containers) are the essential organizational tool. Creating a Parent Group: See how to add a main container and set its initial properties, like changing its layout to Row. Nesting Child Groups: This is the most critical part. Pay close attention to how child groups are placed inside the parent and how the Elements Tree visualizes this nested structure. Parent Alignment Controls: Observe how changing the Container alignment on the parent group (e.g., to Center or Space between) automatically rearranges all the child groups within it. Adding Space: Learn how to use Gap spacing and Padding on the parent group to create a clean, professional-looking layout with consistent spacing.

After watching, the key workflow should be clear: you start with a large parent container and then place smaller groups inside it. The parent group's settings define the "rules of the road" for all its children, giving you high-level control over the layout.

This shows the Layout tab for a child element that lives inside a 'Row' parent container. While the parent dictates the horizontal arrangement, this child element has its own settings for vertical alignment, width, and height, allowing for fine-tuned control within the parent's rules.

Part 3: Building a Responsive Tool Layout

Now, let's put this all together to build a practical and responsive structure for a tool on your platform. We'll design a standard two-column layout: one for user inputs and one for the results. On a desktop, they'll be side-by-side. On a mobile device, they'll stack vertically.

Your Task: Build a Two-Column Layout (20 minutes)

Open a new page in your Bubble editor and follow these steps.

  1. Set Page Layout:

    • Double-click the page to open its property editor.
    • In the Layout tab, set the Container layout to Column.
    • Set the Width for the UI Builder to 1280 and Min height to 800 to give yourself a nice canvas to work on.

  2. Create the Main Content Wrapper:

    • Drag a Group element onto the page. Let's name it Group - Page Padding.
    • Layout Tab:
      • Set Container layout to Column.
      • Uncheck Fit width to content and set the Width to 100%.
      • Set a Max width of 1200px (to prevent content from becoming too wide on large screens).
      • To center this wrapper on the page, select the page itself and set its Horizontal alignment to center.
      • Finally, give Group - Page Padding some padding on all sides. Click the "Apply padding to all sides" icon and enter 40px.

  3. Create the Two-Column Row:

    • Drag a new Group inside Group - Page Padding. Name it Group - Tool Columns.
    • Layout Tab:
      • Set its Container layout to Row. This is the group that will hold our two columns side-by-side.
      • Uncheck Fit width to content and set the Width to 100%.
      • Apply a Column gap of 40px to create space between the two columns we're about to add.

  4. Add the Columns:

    • Drag a Group inside Group - Tool Columns. Name it Group - Input Column.
    • Drag a second Group inside Group - Tool Columns, right next to the first one. Name it Group - Output Column.
    • For both of these new column groups:
      • Set their Container layout to Column.
      • Uncheck Fit width to content.
      • Set a Min width of 320px. This prevents them from being squashed too much before they stack.
      • Set Min height to 400px to give them some substance.
      • To help visualize them, go to the Appearance tab, set Background style to Flat color, and choose a very light grey (#F8F8F8 or similar).

  5. Make it Responsive:

    • This is the magic step. Select the parent of our two columns, Group - Tool Columns.
    • Go to the Conditional tab.
    • Click + Define another condition.
    • Set the condition: When Current page width <= 768. (768px is a standard tablet breakpoint).
    • Select the property to change: Container layout.
    • In the dropdown that appears, select Column.

Now, click the Responsive tab at the top of the editor. Drag the handle to resize the page. You will see your two grey columns sit side-by-side until the page width hits 768px, at which point they will instantly stack vertically. You have successfully created a complex, responsive structure using nested groups!

Conclusion

Today, you've moved beyond individual elements and learned to think like a UI architect. By logically grouping elements and nesting containers, you gain precise control over your application's structure and responsive behavior. This is a non-negotiable skill for building a scalable and professional-looking platform.

Here are your key takeaways:

  • Groups create hierarchy: They establish parent-child relationships that are the foundation of Bubble's responsive engine. Use the Elements Tree to visualize and manage this structure.
  • Nesting is power: Complex layouts are created by nesting simple containers (Rows, Columns) inside one another.
  • Control flows downwards: Parent container settings define the layout for all children, while individual child settings provide fine-tuning within those rules.
  • The Row-to-Column switch is key: Using a conditional to change a Row container into a Column on smaller screens is a fundamental and widely used responsive pattern.

You now have the structural knowledge to build the interface for any tool you can imagine. In our next lesson, we will put this directly into practice as we begin building the first functional tool for your platform: a word and character counter. You'll use the exact grouping techniques you learned today to create the UI, and then we'll dive into the workflows to add the logic that makes it all work.