[New feature] Custom responsive breakpoints for easier design management

Hi Bubblers,

We’re excited to release the ability for you to create your own custom responsive breakpoints for your app!

If you followed along at BubbleCon, you know our team is focused on helping you build more modularly to make your apps scale more efficiently. We recognize the challenges you face when designing for multiple screen sizes on Bubble. It can be tedious to set up conditionals to ensure groups of elements on the page behave exactly the way you want them to. This update brings modularity to the forefront, simplifying the creation of custom breakpoints for your app.

Under the Design tab Responsive, you’ll see the default preset breakpoint at the top of your page’s editor now has the option to add more. You can now:

  • Add and name your own custom breakpoints
  • Choose from Bubble’s existing presets for mobile, tablet, and desktop
  • Modify the pixel value for your default layout
  • Edit or delete your custom breakpoints

For everyone who’s had to manually copy and paste conditionals with a pixel value on all their elements and groups, you can now replace the pixel value with the name of the breakpoint you set. These breakpoints are variables like style and color variables. Changes made to your breakpoint variable’s value ‌will now automatically apply to all conditionals that use that variable.


  • Will deleting a breakpoint delete all the conditionals associated with that breakpoint?
    • The conditionals will still exist, but the deleted breakpoint will be replaced by a “missing breakpoint” error.
  • How many custom breakpoints can I create?
    • There’s no maximum. However, it’s best practice to only manage breakpoints for your user’s most common device types. We recommend no more than 5–6 breakpoints.
  • Do I still have to create conditionals for every page at each breakpoint?
    • Currently, yes, but this is our first step toward our future state of a single-tab responsive experience.

More documentation can be found in our manual. We’d love your feedback on this feature in the comments! Our goal is to provide you with tools that not only save time but also enhance the flexibility and performance of your applications.

Thanks for Bubbling with us,


Forum requests addressed:
Centralizing Display Conditions in Bubble.io’s New Responsive Engine (breakpoints, media queries)
Clean way to define and handle responsive breakpoints? - Question - Bubble Forum


Very awesome update!! :clap:

Keep up the great work Bubble!

This is nice! :+1: Eager to try it out! Quick question though…

Should this work in responsive design mode when referencing other elements’ width/height? Or are we limited to just Current page width?


Thanks @kate.mcnally, looking forward to trying this !

Very nice, been keen to play with this.


Awesome :clap:

Any expectations to allow us to set breakpoints on element width other than just the page width? In my apps I often need to use breakpoints based on the width of a parent container element and not the page width. Is it possible to create a breakpoint based on a group element, or is this just restricted to page width?

Just saw this after posting


Nice addition. Thanks

However, I look forward to this future where Responsive Engine works across the whole app instead of per page basis where we could set up responsive behavior faster.

1 Like

Awesome. No need to create option sets to save these breakpoints anymore :grinning:


Great addition! Looking forward to play with this more.

Can I offer some minor suggestions here:

  1. Reverse the order of the breakpoints. The larger breakpoints should be to the right of the screen.
  2. I don’t know if it was me, but in the past, I could click anywhere along the grey rule to instantly change to that width or to drag the width. Now, I must place my cursor all the way to the end to drag the width. This becomes pretty irritating UX wise and I hope you can revert the change.

Really nice update

How ever, can you try and reverse the order of the breakpoints similar to what with use before since responsive design scale down and not up

This is great stuff! Those “small tweaks” really create a more efficient developer experience.

Great update, something I had always thought should exist!

Next up, easier, faster, natural language searching, filtering and sorting :innocent:

+1 for app level breakpoints


Has anyone given this a good run yet?

Great update

How do we add custom break points? The standard ones and the option to add new ones are not on my page.

You need to go to the responsive tab (above the elements tree) next to UI builder

i hope they will merge the UI builder and the Responsive tab eventually.