Repeating group logos: Getting started with Bubble (Lesson 1.8)

Section 1 (Lesson 8/10): In this lesson, we’re implementing repeating groups on our marketing page. Repeating groups are a foundational element in Bubble that allow you to dynamically display content, like posts on a social feed, products in an online store, or listings in a marketplace. This functionality is crucial for creating scalable and interactive applications that can handle vast amounts of data without compromising on design or user experience.
In this lesson, you will learn:
• The concept of repeating groups in Bubble and their significance for building dynamic and scalable applications, illustrated with real-world examples like Instagram, TikTok, and Facebook feeds.
• Step-by-step guidance on setting up your first repeating group within Bubble, including how to connect it to your database and configure it to display content dynamically.
• Practical tips on overcoming common challenges associated with repeating groups, like ensuring good responsive behavior, to provide a seamless experience across devices.
Resources folder:
➡ e6387a14ba6d0b...
Bubble editor:
➡ bubble.io/page...
* * * *
Subscribe to this channel to be the first to hear about new videos!
Bubble is a software development platform that enables anyone to build and launch web applications without writing code. Rather than specializing in one or two aspects of web development (like designing landing pages or building databases), Bubble’s full-stack visual programming interface does it all. That means anyone from first-time entrepreneurs to enterprise-level companies can take an idea from concept to fully functional, scalable reality - faster and cheaper than you could with just code.
Have a question? Please visit bubble.io/support.
Learn more about Bubble:
Homepage ➡ bble.io/rrmDzZ
Twitter ➡ / bubble
Blog ➡ bubble.io/blog

[@davidjenner]

I like your videos, for this one though I don't know if I'm the only one - I had to replay the 2nd half of this video a few times to make sure I was putting the right numbers in the right contextual as my logos were all squashed and on top of each other. Got it eventually! On to the next video!

[@masonorantes276]

Greg you are the man.

[@footpila]

Great videos. Thank you Greg ❤️

[@Tim_helpinghands]

Thank you,sir!

[@jakbo_]

It would be great if bubble would implement a workflow that's similar to how webflow handles the responsive design were you design it for one size and it carries on all the sizes smaller. So instead of having different conditionals for each page with you can just modify the parameters right on the element

[@jazziebaby7129]

Well, that's what Webflow does, the only difference is you don't "see" the conditionals, but they are still there in the backend as breakpoint exceptions

[@akacute0115]

From this session it becomes a little more difficult. really good guide.

[@edenbitton]

Great videos. Great Flow.

[@bigcretin]

One of the confusing things about following along is that, often, my results will be different. I added the "We work with great companies" text element but it stretched the whole width and it can take a moment to work out why it doesn't look the same as yours (because of the fixed-width option for anyone who's wondering). Any reason I don't have the same default options set as you do? Also, I was confused as hell for a moment as you suddenly went (at 16:44) from editing the repeating group to editing the image. Given that people are going to be looking at their own projects as they listen to you, you REALLY need to be clear on the fact you're changing the element on which you're working.

[@gregory-john]

Bubble rolled out some changes to the way elements behave mid way through creating this course. From Section 3, these changes will be back in sync and my editor will behave the same as yours.

[@cdavidmore]

@@gregory-john Ok, now i understand the problems i'm having

[@officialaibusiness]

Did anyone else notice the mic-drop at 1:46?

[@12WhiplasH123]

Very nice tutorials you are making! I have one issue, about 16:30 in the video, change the image to a larger size, I do the same as you do, remove min width, fit height to content and min height is 64pixels, but the image size of the logos are still not changing..? I even tried 128 just to test it, but it is the same size..

[@12WhiplasH123]

It worked when I changed it in the "Image logo" in the tree view, and not in the RepeatingGroup Company Logo..

[@RayDev22]

GOAT!

[@mattpelisson2787]

I can’t copy the Company logo option set over from the demo app to mine, any tricks for that?

[@MuthukumarMurugesan-tw1sq]

Great videos. However, I'm confused about the company logos option set part. I can see only the name of the logos but I'm wondering where they are kept or stored. Can someone explain?

[@worldteacher1]

Suuuuper confused. At 9:28, you say click "All company logos." That option does not appear. ten minutes with ChatGPT has not helped and only confused me more. This is not the first time the videos have not corresponded with reality, but it's the first time I am totally lost. Please help!

[@worldteacher1]

After about 20 minutes, ChatGPT told me to delete the repeating group and re-add it, which fixed it. Not fun.

[@damilolafulani1836]

Hey everyone... I could not edit or add a custom screen size to the screen sizes in the responsive tab of the bubble design page. I need help on what to do and how to do it. or is it only available to paid users?

[@gregory-john]

Do you not see the + button next to the 375px breakpoint?

[@RainbowRainbowRainbow-c4x]

Could help me with this? There are 30 trip places in lifting group. Trip is conduct in order from 1 to 30. And the details of each trip are shown in a popup window instead of on the page. In this situation, Is it possible to set up two links in the trip 2's popup page that go to the trip 1's popup(previous) and 3's popup(next)?

[@iniedoro]

I followed exactly how you created the option set and setting up the structure for the repeating group. however, after I click on the preview, no logo appears. I may need to re-watch the whole tutorial again. thanks, this is a great video tutorial.

[@gregory-john]

Make sure that the logo in the first cell has a data source - current cells logos img.

[@alexpuig8292]

Amazing course! one quick question, for any screen width below 479 i get a white gap on the right side of the screen, any clue on why could this happen? thnk you!

[@gregory-john]

Sounds like you have padding or margin set on one of your section groups.

[@jimmymorin9562]

My icons were tiny compared to yours when first uploaded. Thought it would get better as tutorial moved on but no

[@gregory-john]

That's ok - just resize them as I do in the lessons. Checkout the demo app if you're struggling. The link is in the lesson description.

[@KMNP-lw8ms]

I dont seem to be able to copy paste styles or in this case the option set from the demo app to my app (im on the paid starter plan). to clatify, i can click 'copy' on the demo option set but I dont see a 'paste' option in my app

[@gregory-john]

Add an option set manually first, just one. Call it 'delete me'. Then on top of that first option set, you should be able to right click and paste the one from the demo app. i.e. You need to have an existing Option set to enable the paste option.

[@KarlGriffin-h4s]

Where is the "Demo app"? I can't find it.

[@cdavidmore]

In the description

[@officialaibusiness]

I can't add 576px. Is this a paid feature?

[@gregory-john]

On the responsive editor, next to the 320px breakpoint there should be a + button. You can add breakpoints here.

[@officialaibusiness]

@@gregory-john Ah, I was pressing "Enter" rather than clicking the little tick icon. This now works, thanks

[@perkelele]

Mic manifested out of thin air at 1:47.

[@ameer_an]

1:45 i found a mic

[@gregory-john]

Damn 😅

[@waleedasghar1189]

🤣

[@SameehanChauhan]

yeah

[@tommylayhew7065]

Editing the Debugger URL does not make it go away anymore. How can I do it?

[@gregory-john]

Change ?debug_mode=true to ?debug_mode=false or just delete ?debug_mode=true from the URL.