Forum Academy Marketplace Showcase Pricing Features

New Responsive Tutorials Mega Thread

Good morning everyone!

Bubble’s new responsive engine is amazing. There are lots of tutorials being made and I thought I’d make a mega thread to start collecting them all to help everyone out.

The basics are covered by bubble themselves
1: Introducing: A New Way of Building Responsive Apps
2: How To Create a Fixed Repeating Group With Bubble’s New Responsive Engine
3: How To Create a Full List Repeating Group With Bubble’s New Responsive Engine
4: How To Create Ext. Vertical Scrolling With Bubble’s New Responsive Engine
5: How To Create Horizontal Scrolling With Bubble’s New Responsive Engine
6: How To Create Vertical Scrolling With Bubble’s New Responsive Engine

I’m sure more will appear on their channel so do subscribe to it:

I did a 2-hour workshop covering flexbox, sign up, left menu dashboard, repeating group cards
7: Bubble New Responsive Tutorial

@jacobgershkovich made a recording going over the messaging interface
8: Bubble’s New Responsive Engine Tutorial 2021 – Building a Messaging Interface

@eli did a live session cloning bubble’s landing page in the new responsive engine
9: Cloning Bubble’s homepage with the new responsive editor!

I have created one more on repeating groups and tables. It has been made and uploaded but is still processing on youtube.

I’m sure there are others that I have not come across.

I’ll try to keep posting any more videos I find here in this one thread as the chatter on my youtube video and other messages seems to indicate that quite a few people have dived into the new responsive during the beta and are a bit lost :slight_smile:

Hope this is useful.



Great idea, @ZubairLK!

1 Like

The responsive repeating group table tutorial is now live on Youtube as well



Thanks for putting this together @ZubairLK !

For anyone who’s interested, I also released another video last Friday in which I build a sign up page from scratch using the new responsive engine. You can find that here:


Thanks Jacob!

I have recently added some tutorials to my youtube channel on the topic.

Single Cell Repeating Group - New Responsive Engine

Dashboard Page Layout - New Responsive Engine

Reusable Header - New Responsive Engine

Full Page Loader - New Responsive Engine

I have added a companion tutorial on using the group focus element as a profile menu in a reusable header.

Learn how to create Group Focus Profile Menu in New Flexbox Responsive Engine in


Thanks @boston85719 . Solid work!

1 Like

20 minutes until the pronocoders livestream with Eli Beachy and Tonya Aiossa. :hugs:


I have a few elements in a row and I want one of them to be on the right most side of the row all the time irrespective of the width of the row. All other elements should be left aligned and be next to each other just like a typical row.

How to achieve this? In the “layout” section of that element that I want to be on the right all the time, I don’t get the nonant to make it aligned on the right of the parent. My “Container layout” for that element is set at “align to parent” already.

Screen Shot 2021-11-28 at 7.51.15 PM

Is there a different thread to ask such questions on new engine?

Video on how to build a floating group banner with the responsive engine below:

1 Like

Thanks for the reply. Parent element is a row which has other elements too. On changing the container alignment of that, it moves all the elements to the right. Are you suggesting I create container within container? How will that help though?

I managed to get it done just now but with a round about way. In the row I created a group which has layout of “column”. Within the column layout I have another group that has layout of “align to parent” and set to “right aligned”. Within this group I have put my original element.

I had to do this as “align to right” option was coming only in case of column layout.

Now while I have done this, I am not really happy with it as it is not really clean. Also I thought new responsive engine will actually reduce the need of creating group for every damn thing that earlier engine required.

Ideally, specific questions like this should be in their own thread so that when others look, they can find it.

And this particular thread can serve as a host for all the new responsive tutorials.


1 Like

Just uploaded a new tutorial on building a responsive Landing page.




Here is our video - responsive engine from start to finish :slight_smile:


:wave: My take on a split screen layout:


Hey :wave:

We are starting a book :orange_book:. The first chapter is about navigation menus in the new responsive engine.

We have a poll setup here to gauge the interest in moving forward with the book. We would love it if you all would take the poll. Here’s the link: 📙 New Responsive Engine Book - Chapter 1 - Would you be interested? Poll inside

Thanks :blush:


For All Your No-Code Education Needs:

1 Like