Built on Bubble
Build beautiful pages with responsive design
Bubble’s responsive editor gives you a fast and powerful way to create app layouts that fit any modern browser or device.
How to build responsively
By mixing and matching three basic container layouts, Bubble allows you to build any type of modern web layout based on the principles of CSS flexbox. Each container layout has its own set of controls, and elements within those containers will inherit their parent container’s properties.
The Column
Make your content align vertically. The Column container lets your elements – text boxes, buttons, images and more – stretch or push other elements down as the screen is resized or the child element grows.
The Row
Make content that aligns horizontally. The Row container lets you wrap elements within the row as the screen is resized to become smaller for mobile layouts or as new elements are added. You can also adjust the entire container’s vertical alignment.
Align to Parent
Make content that aligns to any side of a larger, parent container. New elements drawn inside or dragged into an Align to Parent container (child elements) will snap to the nearest nonant – like a quadrant, but with nine spaces.
Everyone needs a little space sometimes
Make use of negative space and give your elements room to breathe by adding margins and padding.
Margins
Set the margins around all four sides of an element. Margins create extra space around an element, unlike padding, which creates extra space within an element.
Padding
Create custom padding on all four sides within your elements. This gives your elements a standard amount of space even as your page size changes.
Gap controls
Use gap controls to set consistent spaces between elements within the same parent group. Row gaps create horizontal spaces above and below elements, and column gaps create vertical spaces on the sides of elements.
Go forth and create
Hundreds of responsive layouts are possible by combining and layering different containers. These are just a few:
What are the benefits of designing responsively?
Modern apps need to work across a number of devices, from laptops to mobile to (maybe) your new fridge. Responsive web design allows you to design your app to flexibly resize across any screen.
With Bubble, you can build a custom web app (no code needed) and have full control over how it behaves on different screens and devices, making it faster and simpler to design a beautiful, powerful application.
Check out these responsive-ready templates to kickstart your next build
Get a head start with community-built templates.