How To Build Overlapping Repeating Groups In Bubble.io (Complete Guide)

29th of April, 2025

Overlapping repeating groups allow you to display multiple repeating elements in a more condensed space. This style is commonly used when displaying elements such as user profile photos.

In this guide, we’ll explain how to design an initial repeating group of profile photos, add negative margins and conditional styling to allow overlapping between elements, and update the alignment of the overall repeating group in the page.

1. Design the Repeating Group

Add a Repeating Group to Your Page

For this example, we’ll be using an existing SaaS landing page template that uses an overlapping repeating group to display multiple profile pictures from the app’s database.

However, for this guide, we’ll focus on building an overlapping repeating group completely from scratch by adding a new repeating group element to our page.

Here’s how to add a new repeating group to a page:

1. Head to the Design tab of your current project.
2. Navigate through the UI Builder panel for the Containers group and look for the Repeating Group option.
3. Drag-and-drop a repeating group onto your desired page.

Configure the Repeating Group’s Data Source and Orientation

You’ll need to then set the data source for your repeating group.

For this example, we’ll be displaying users from our database. Our SaaS app has a User data type that includes a profile-photo image field that we wish to display.

Do note that for your own projects, you may be handling other data types with images, such as company logos and so on.

To set up our repeating group, we’ll need to perform a search for all users in our database and adjust a few settings to display them horizontally:

1. In the Design tab of your project, select the Repeating Group element you just added.
2. In the Appearance tab, set the Type of content to User.
3. Set the Data source to Search for Users and set the Type to User. No need to add any constraints, we’ll just be performing a straightforward search.
4. Uncheck the following options:
   1. Set fixed number of rows
   2. Set fixed number of columns
5. Update the Scroll direction to Horizontal

2. Configure the Image Elements

Next, we’ll need to set up the image elements we want to display in our repeating group.

In the UI Builder panel, scroll up to find the Visual Elements group and drag the Image option into the repeating group in our page.

You can verify the image is inside the repeating group by checking that “Current cell’s…” options appear when inserting dynamic data.

Set a Dynamic Image Source

Next, you’ll need to set the image source.

1. In the Appearance tab of the image element, set the Dynamic image option to Current cell’s User’s Profile-photo.
2. We also recommend selecting the additional option “:processed with Imgix” since it also allows us to process the image further. Imgix is an online service that can automatically optimize images stored in Bubble’s databases.
3. In the Imgix processing pop-up, enable “Resize to fit the dimension by cropping”. This enables consistency between different user-uploaded images.

Style the Image Element

For this example, we also want to style the image as a circular element. 

While still in the Appearance tab, scroll down to find the border style and roundness options.

• Add a solid border. We’ll add a solid border for now as a guide when setting up the overlapping repeating group.
• Set roundness to 100. This will help display the image element as a perfect circle later.
• Adjust the width and fixed-aspect ratio. In the Layout tab, we’ll set the width to a much smaller 60px and enable the option Keep element aspect ratio fixed and set the aspect ratio to 1:1.
• Adjust alignment and margins. Set the horizontal alignment to center and add 10px of margins at the top and bottom. We’ll leave the left and right margins at 0 for now.

The elements in our repeating group should now be circular.

3. Adjust the Repeating Group Dimensions

Select the overall repeating group and adjust the following settings:

• Update the minimum width and height. In the Layout tab, set the minimum width to 0 so it can shrink to the smallest possible size. For the minimum height, we’ll set it to 80px (60px image height + 10px top margin + 10px bottom margin)
• Check the option Make this element fixed-height.
• Set the minimum width and height of each row and column. In the Appearance tab, set the minimum height of each row to match the minimum height of the overall repeating group (80px in this case). Next, set the minimum width of each column to 0px to allow cells to shrink down as needed.

You can click on the Preview button at this point to look at what the current repeating group would actually look like with the dynamic content.

4. Create the Overlapping Effect

Add negative margins to overlap elements

We’re now ready to start overlapping the image elements. To do this, select the image element and head to the Layout tab.

Add a small negative margin to the left side of the image (e.g., -15). This will make the images overlap with each other.

If we click the Preview button again, we can confirm that our repeating group is now overlapping

However, one main issue with the current setup is that the first image in our repeating group also has a negative margin, which cuts off a portion of our first element. We can fix this by adding conditions.

Add condition for first element

We can add a condition to set the left margin to 0 if the current cell is the first element of the repeating group.

• In the Conditional tab, we’ll define a new condition.
• Set the condition: When the current cell’s index is 1
• When this condition is true, set the left margin to 0
• You can click on the ON/OFF toggle in the corner to see how this affects the repeating group.

5. Center the Repeating Group on the Page

To match our original overlapping repeating group, we’ll need to update the alignment of our new repeating group.

Here’s what you’ll need to do:

• Set a fixed width. Go to the Layout tab and set a fixed width. This width can be calculated based on the number of image elements you expect to display. For this example, we’ll choose 400px as an estimate. 
• Center the repeating group. Set the horizontal alignment of the repeating group to the center of the page
• Remove unnecessary borders. In the Appearance tab, set the style of the Separators to None and set the border style to None as well.

You’ll now have a repeating group where all the elements overlap perfectly.

Conclusion

After following this guide closely, you should now have a perfect repeating group where all the profile images overlap. This horizontal overlapping effect in a repeating group can give your website a compact and visually appealing way to display multiple user photos in a small space.
The Bubble techniques used to create overlapping repeating groups can be adapted to fit your website for any use case where you would like to display elements in a space-efficient manner. You may also benefit from another of our guides where we covered how to create scrolling horizontal repeating groups in Bubble!

Get access to the Complete OpenAI Guide