Responsive design is a method for giving your users a great experience no matter what kind of device they're using to access your app. Instead of building separate pages or views for different screen sizes, the goal is to create a single design that automatically adjusts its layout and content to fit the screen it's rendered on.
Responsive design matters for a few reasons:
It reaches the broadest range of users, since they can access your app from all types of devices.
It reduces development and maintenance time, since you're working with one design instead of many.
On the web, it helps search engines rank your pages higher, since they favor pages that work well on all devices.
Bubble's responsive engine
Bubble's responsive engine is built into the same visual editor you use to build your pages and views. It uses a grid-based layout system that adjusts how elements are arranged based on the screen size and orientation of the device.
The engine works the same way on both web and native mobile apps. The core concepts (containers, layout modes, spacing, alignment) apply identically across platforms. What changes is the range of devices you're designing for and the specific elements available on each platform.
An important point to keep in mind with responsive design is that it isn't just about resizing elements to fit the current screen. It's about making deliberate decisions: resizing some elements, hiding others, and rethinking parts of the UI entirely.
Think about apps you use every day. The mobile version isn't just a smaller copy of the desktop version. It adapts in many ways to feel natural on both platforms, from how content is organized to how users navigate through it. Great responsive design accounts for those differences instead of trying to force one layout to work everywhere.
For example, on a large desktop screen, a page might have a three-column layout with a navigation menu, main content area, and a sidebar. On a smaller mobile screen, the same page can rearrange itself into a single column, with a menu icon that opens a slide-in navigation. On native mobile, a view might have a horizontally scrolling row of cards that adapts to different phone widths, using safe areas to stay clear of hardware features like notches.
Understanding the engine at a conceptual level is the fastest way to master responsive design in Bubble. The specifics change by platform, but the tools you use to shape a responsive layout are consistent.
Mobile web apps versus native mobile apps
An important distinction in this article is the difference between a native mobile app and a responsive web app that works on mobile. Keep these points in mind:
A responsive web app adjusts its layout to fit the current screen size, regardless of the device.
A responsive web app can be used on a tablet or smartphone, but that's not the same as a native mobile app. It's still a web app, accessed through a browser.
A native mobile app is built specifically for iOS and Android devices and can't be accessed through a browser. In principle, native mobile apps follow the same responsive practices as web apps: views should adapt to different screens. On mobile devices, though, the gap between the largest and smallest screen is usually smaller than it is on the web.
Responsive design on the web
Web apps span the widest range of screen sizes. A single page might be viewed on a 4K monitor, a laptop, a tablet in landscape mode, and a phone in portrait mode, all in the same day. Responsive design on the web is about making that single page look great across all of them.
The most common breakpoints to plan for are:
Desktop screens, roughly 1200 pixels wide and up.
Laptop screens, roughly 900 to 1200 pixels.
Tablets, roughly 600 to 900 pixels.
Phones, roughly 320 to 600 pixels.
Web-specific elements like repeating groups, popups, and floating groups all support the responsive engine, so you can build layouts that reflow naturally between these breakpoints. Common patterns include:
Multi-column layouts on desktop that collapse to a single column on mobile.
Navigation menus that turn into hamburger menus on smaller screens.
Sidebars that hide entirely or collapse into overlays on phone-sized screens.
Article series:Elements for web apps
Responsive design on native mobile
Native mobile apps run on a narrower range of screen sizes than web apps, but that range still includes plenty of variation. Different phone models have different screen widths, aspect ratios, and safe areas, and users can rotate their devices between portrait and landscape orientations.
Responsive design on mobile is about handling these differences smoothly. The responsive engine works the same way as on web, but the elements you're working with are mobile-specific: vertical lists instead of repeating groups, sheets instead of popups, and views instead of pages.
Key considerations for mobile responsive design:
Safe areas. Modern phones have notches, home indicators, and rounded corners. The safe area keeps important content clear of these features, and views can be configured to respect it.
Device variation. Even within the same class of device, screens vary in width and height. Layouts should adapt to fit both compact and full-sized phones.
Orientation. Users can rotate their devices between portrait and landscape, changing the aspect ratio significantly.
Content density. Mobile screens are smaller than desktop screens, so layouts often need to prioritize the most important content and defer secondary content to overlays like sheets.
Article series:Elements for native mobile apps
Containers
Every responsive layout in Bubble comes down to containers. A container holds your elements and decides how they behave when the screen size changes, whether that's stacking, resizing, or repositioning. If you want control over how your app looks on different devices, containers are where that control lives.
Each container has a layout mode that determines how its children are arranged, and a sizing method that determines how each child grows or shrinks. Set these two things correctly, and your design adapts on its own. You won't need to build separate versions of a page for different screens.
Container layout modes
Regardless of platform, containers are the foundation of responsive design. Each container uses one of four layout modes to arrange its children:
Layout mode | What it does |
Column | Stacks children vertically (on top of each other). Widths adjust to fill the container, while heights fit each element's content. |
Row | Arranges children horizontally, side by side. Heights adjust to fill the container, while widths fit each element's content. |
Align | Positions children in one of nine fixed positions within the container. |
Fixed | Places each child at a specific position, without automatic layout logic. |
As you design your app, you will usually use a combination of these layout modes to get a design that looks the way you want, and adapts to different screen sizes.
Sizing and spacing
Elements in a responsive design can be sized using a mix of fixed values, percentages, and content-based sizing. The right choice depends on how the element should behave as the screen size changes:
Sizing method | What it does |
Fixed | Keeps the element the same size across all devices. Useful for elements that should never scale, like icons or small buttons. |
Percentage | Scales the element with its container. Useful for elements that should grow or shrink with the available space. |
Fit to content | Sizes the element based on what's inside it. Useful for elements like text or buttons that adjust to their content. |
Fill container | Stretches the element to take up all available space in its container. |
Spacing works the same way across platforms. Padding and gaps can be set on containers to control how much room elements have around them, and how much space sits between them.
Nesting containers
A common approach is to nest containers inside each other. A page might have one container arranged in a column, with a row container nested inside it to hold a set of buttons side by side. Each container only has to manage its own children, which keeps the overall structure easier to follow, even as a page grows more complex.
Nesting also gives you more precise control. You can apply a different layout mode or sizing method to each level, so a section of your page can behave independently from the rest.
Testing your design
Bubble's editor includes a responsive preview that lets you test how your design looks at different screen sizes without leaving the editor. On web, you can slide between screen widths to see how the layout adjusts. On native mobile, you can preview on different device models to check spacing, safe areas, and orientation.
Testing on real devices is still worth doing, especially for mobile apps. Emulators can catch most issues, but nothing beats seeing the design in the user's hand.
Getting started
The next article covers the fundamentals of building responsive pages and views, including how containers, layout modes, and sizing work in practice.
What is responsive design?
Responsive design is a method that gives your users a great experience no matter what kind of device they are using to access your app.
Instead of having to set up separate pages for different devices, the goal of responsive design is to create a single page that automatically adjusts its layout and content to fit the screen size and resolution of the device being used to access it.
Responsive design is important for several reasons:
It gives the broadest number of users access to your app as they can access from all types of devices
It reduces development time since you don't need to design and maintain separate pages
Search engines tend to favor pages that are accessible on all devices which can help these pages rank higher
Bubble's responsive engine
Bubble features a design environment that lets you control every aspect of your app's responsiveness in the same visual editor that you use to build your pages. It uses a grid-based layout to change the appearance of the page depending on the screen size and orientation of the device.
For example, on a larger screen like a desktop computer, your page might have a three-column layout with a navigation menu, main content area, and a sidebar. But on a smaller screen, such as a smartphone, the same page might rearrange its content into a single column layout with a "hamburger" menu icon to access the navigation.
In the next article we'll explore the basics of how this design method works.
Article: Building responsive pages
Other ways to learn
Video lessons
Video lessons
We have several video lessons that can help you learn about designing responsive pages.
You'll find our full Youtube playlist about the responsive editor here.
Bubble's responsive engine is a feature that was introduced in 2022. In older applications you may need to activate the feature on a page-by-page basis and convert those pages to the new engine.