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:

Resources folder: ➡ https://e6387a14ba6d0bf3e823090f8d959...

Bubble editor: ➡ https://bubble.io/page?type=page&name...

To give you a real world example of a repeating group, think about a social feed such as Instagram, TikTok, or Facebook. Their developers don't design every single post that is posted because there are billions! They design one post, the style, the structure, and then it is repeated. And that's what a Repeating Group is. Let's jump in.

So here we are on the landing page and here we have a repeated group of different logos. I could in fact just design this to be six different logos, but rather, to adopt a more modular approach, I'm only going to design the first cell by dropping an image in the first cell and then feed the other images through via an Option Set.

Now, to help me explain how we will be using Repeating Groups, I've just jumped ahead to one of the pages that we'll be creating soon, and this is a list of jobs. I only designed the first job here and then the repeating group did the rest for me. So it looks just like a social feed.

Now, in the context of our landing page, there are other ways to display lists. In this particular list we have six logos. And yes, I could design these six logos and make it static. If you have experience building landing pages with another no code builder, maybe that's the way you do it. But we're going to use Option Set data, which is list data, and then we're going to feed through that Option Set list into this Repeating Group to then just do the rest of the work for us. Much better.

Okay, into the demo app. I'm going to go over to the Data tab and I've clicked on "Option sets." We can see a whole bunch of option sets. Let's take a look. So this one I created is called "Company Logos". Now, option set data is created by you, the admin. Only you create this. Your users do not upload this dynamically, that's what a database is for. But an option set allows us to basically create repeated lists of data that we would use throughout our app in one place, and manage it in that single place.

Okay, what else do we have? We have Location data. I've manually created this. This would allow me to feed through a list of locations into various drop downs throughout my app and also edit those as well. Here we have some Work Preferences and User Types.

So jump into the demo app. I want you to right-click and copy "Company Logos". Then head over to your app, and go to the Data tab --> Option sets. (Skip tutorial, first of all.) First, we're just going to create a "Test" option set. This just starts a list on the left hand side, but now we can just right-click on "Test" and paste. And there we have it: Company Logos. If I click "Modify attributes" for the first option in this option set, we have the logo available here and I can clear that logo and I can upload a new logo from my computer or I can edit the name.

So now that we have our option set of logos, we need to drop a repeating

group on the page and then feed these logos into the repeating group so that the repeating group can do the design work for us. So let's go to the Design tab.

Now, I want to make one quick adjustment here. I want you to double-click on "Group Section". Make sure it doesn't say "index", but that it says "Group Section." On the Layout tab, I just want you to check "Fit height to content", and then I want you to set a minimum height of 768. That is just a design choice. Now, click on the index in the Elements Tree and set a page height of 1400. This now gives us some real estate to work with beneath it.

Okay, so this is named "Group Section", so we need another "Group Section" because now we have a separate part of the index page that we're going to be designing. We don't just throw elements onto the page, we create neatly stacked sections in a column layout.

So, I'm going to grab a Group and I'm going to draw it in. You can see the positioning is sitting below my other group. First thing I'm going to do is call it "Group Section", though we don't need to, you can individually name this, you could name this "Group Social Proof" if you'd like, though I prefer to name things according to the function.

Okay, we're going to set the Container layout to "Column", scroll down and remove the fixed width, remove the min width and set the min height to 300 for now. This just gives us some space to design within.

Now I like some uniform padding to my groups, this is the space inside, not outside. (Let me just change the color of this to blue; you don't need to do this.) On the Layout tab, if I was to apply a Top Margin of 80 pixels, look what happens: it basically creates 80 pixels that I've chosen of space between the first "Group Section" and the second "Group Section". But it's not margin that I want here - and we will be using margin soon - but for the most part, we'll be using padding to neatly position our elements within groups to make sure that they don't touch the edges.

I'm going to remove the margin and instead I'm going to set some padding. We're going to be using a repeated pattern for the padding on our Group Sections: top and bottom padding will be set to 96. Then, you can see because mine is blue that certain parts of the group are slightly darker, and that represents the internal padding. For left and right padding, you can set them to 32. Okay, let's set this back to white.

So let's have a look at the Design tab on the demo app and it says "We work with great companies", that is written in "Body Large." So I'm going to get a text element, drop it inside the Group, and go ahead and type this out: "We work with great companies", and then change the Style Attribute to "Body Large." After that, we can center-align the text and then head over to the Layout tab, where we're going to horizontally align in the center, uncheck "Make this element fixed width", remove the "Min width", and "Min height". Lastly, we're going to fit width to content. Okay, fantastic.

Now for the Repeating Group. Head over to the Container section in the UI Builder, select a Repeating Group and just drop it in for now, because there will be a lot to configure here. Let's call this "RepeatingGroup Company Logos". On the Layout tab, it's asking us: what layout do we want in the first cell? We're just going to set that to a Column. While we're in the Layout tab, you can set the "Max width" to 992 by unchecking "Make this element fixed-width" and setting it to 992. You will recognize 992 from the Responsive tab. Now, we can horizontally align this Repeating Group in the center and remove the min width.

Now we need to head over to the Appearance tab because we have some different options, and one of those are "Type of content" and the "Data Source". So basically, we need to map the data source with the Option set. That's all we're doing. We're just making a link. Okay, so "Type of content" will be the option set you copied across called "Company logos", so I'm going to choose that. So that is the Type of content, but we still need to write an expression to be able to get there, so we're going to click in the "Data source" box, and under the Data Sources dropdown, we're going to choose "All Company logos".

Now, in terms of the behavior for how the Repeating Group is displayed, if I go back to the demo app, we have one row which we can see and six columns, so let's do that and set it to one row and six columns. Now this is super, super tall, so let's actually reduce the size. So from a "Min height" of 350 in the Layout tab, I'm just going to set it to about 80 pixels tall. That looks better.

Now you can see that in this first cell, "Company logos item 1", this is where we do our design work. I cannot drop anything else in the other cells because that's what Bubble is going to do for us.

Let's grab an image element, click once, and I want you to draw it inside this first cell. Any shape will do. Fantastic. Now, let's first change the name from "Image A" to "Image logo". Even though the repeating group has a data source which is mapping to our Company logo option set, we still need to feed the data through to the actual element, because even if an element is in a repeating group cell, it can still get data from other locations, and we'll get there.

The location of this image is within the option set. I'm going to take you back to the option sets to confirm this. If you navigate to the Data tab --> Option sets --> Company logos, we can see the names of these but we want to display the logos. What I did to achieve that is I created a new attribute called "img", and then I set the type to an image. I went ahead of time and I did that.

We actually need to figure out how to get to Company logos and then find this image field. If you navigate back to the "Image logo" element's Property Editor, it's in this "Dynamic image" input where we will ensure each cell will have a different image displayed. I'm going to click "Insert dynamic data", and the first one says "Current cell's Company logos". And this is actually correct, this is part of the expression. I'm going to click that and now it's bringing up "'s Display", but the display is the name (it said "Wise", it said "Figma", it said "Bubble"). We want to display the image, not the name. That's why we're going to go to the second option and choose "'s img", and this is basically creating a path to pull that image from the Company logos's image attribute.

Now, to be able to render or to be able to view repeating group data or table data

that's coming from the database or from an option set (those are the two locations that we'll be dealing with in the course, those are the two main locations in an app build as well), but to be able to see it, we have to actually load the page as a user would see it.

To do that, we're going to go up to this "Preview" section and we're just going to click it. Here, we scroll down and you can see we've made a pretty good start (it needs centering within the cell and we probably want to remove all of the borders as well).

Now, whenever you hit the preview button in Bubble, Bubble will add what's called a "debugger bar", and this is very, very useful, but something we'll be dealing with a little bit later as it enables us to inspect elements and to troubleshoot things like workflow steps. For now, I would actually like to remove this. So, if you look at your URL, at the end of your URL, it will say "?debug_mode=true", and you have two options to remove this debugger bar: you can either change the word true to false, or you can just remove "?debug_mode=true". The debugger is useful and we will cover that later!

For now, l just finish up the styling here. So let's head over to the Layout tab, and on the Layout tab I can see that I can move it to the center of the cell. Now I'm going to click back on the "RepeatingGroup Company logos", and I'm going to change this container alignment to vertically align. Now it puts it in the center. So we clicked on the cell's image to move it across to the center, but it'll still pin to the top. Then we instructed the repeating group to actually move all these elements to the center of that cell.

Now in the Appearance tab, I'm going to detach the style. I'm going to remove the borders by setting it to "None" and I'm going to remove the separators. The separators, are these vertical lines going to remove those and set this equal to "None". Okay, I'm going to save this as a new style by going into the Style Attribute dropdown and clicking "Create a new style...". We're just going to call this "Transparent" and create.

So instead of clicking "Preview" again, I already have my tab open (if you've closed your tab you need to click Preview again). If it's still open, just go across to that tab because it means that the debugger bar won't load. Every time you click on Preview, the debugger bar will load across the top. You can see that there is a bar here that says, "We just updated this page. Please refresh the page to get the latest version." So we're going to click that and Bubble will just reload.

Okay, getting there. We're going to make another small change and that is just to increase the size of these images, so let's do this on the Layout tab of the repeating group (remember, you have to click in this greyed out area to get the repeating group's Property Editor up, or you can come across to the Element Tree and select it). We have "Fit height to content" checked, so I'm going to remove the 80 pixels of minimum height. Now, the repeating group is fitting height to this image. Now I'm going to uncheck "Make this element fixed-width, and I'm going to remove minimum width and I'm going to set a minimum height of 64. Let's have a look at the front end. You'll need to refresh the page. Looking very, very nice.

Okay, so we need some row gap spacing here to separate these elements, so in "Group Section" we're going to check "Apply gap spacing between elements" and we're going to choose 32.

Okay, but what about responsive design? Let's head across to the Responsive tab, because when the page shrinks down, these company logos are going to become very squishy. This doesn't work at all.

Now we're going to add some conditional expressions similar to what we did with this Text in the Styles tab. With the Repeating Group Property Editor up, we're going to go to the Conditional tab. We're going to type "page" and select "Current page width < Mobile Landscape (768 px)". Now, let's change the number of rows and columns when this statement is true. Currently, we have one row, six columns. Let's set it to two rows and three columns, as we have to display six images overall.

But what about mobile phone widths? For that, we're going to introduce a new breakpoint in between 768 and 375, so let's click on this plus button at the top next to 375 and click "Add custom" and type 576. And folks, these are all of the breakpoints that I only ever use in all of my design work. So there they are. You don't need to memorize these numbers. Those are the numbers, you can use them in all of your app builds, okay?

So, I'm going to save myself some time by right-click copying on this expression. I'm going to define another condition and paste in this expression, and I'm then I'm going to click on "Mobile Landscape" and instead look for the 576 px custom breakpoint and click on it. So this is basically the mobile breakpoint, but don't get it confused with 375 because some phones are wider than 375, some are 414. The point of the 375 breakpoint is that it's the smallest size, that's where we stop designing. But we do have quite a large gap between 375 to 768, so I've chopped it in half down the center and that's what I'm going to call my mobile breakpoint: 576.

So when that happens, we're going to set columns to one and rows to six. Let's preview the page. If you're using a chrome or a chromium style browser, you can follow along

with what I'm about to do for responsive design: you can right-click anywhere here on the page and you can say "Inspect". If I scroll up on the right hand side I can see this little devices icon, and that allows us to test on the front-end the responsive design. So if I scroll down, I'm currently at 768, and if I squeeze this down a little bit, you can see that it is now displaying two rows and three columns. The images are also a little bit bigger, which I kind of like, but we could prevent that. But I like it.

Now I'm going to click down to 375, and again, we've changed the layout of this repeating group to one column and six rows. Now if we do want slightly smaller logos, if we feel like these are too big, what we can do is double click on this image can double to bring up the Property Editor, go over to the Layout tab, and set a maximum width. The current width - if I just hover over this element - is 165 pixels. I can set a maximum width of say 165 pixels, which is what it currently is, and if I go back and refresh the page, here we have contained the size of our logos.

Okay guys, lots of new concepts there: we had Option Sets, we had Repeating Groups and we had the cell layout, and how to feed through option set data into repeating groups.

You did a great job this lesson, and I'll see you in the next one.