Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

Repeating Group design tips

In this Bubble tutorial we demonstrate our top tips for designing great looking repeating groups in your Bubble app.

What's the best way of adding padding and spacing to improve the design of a repeating group in your Bubble app?

Space with padding and margins

Well, let me show you. I've got a very simple layout here. I've got a repeating group that's showing me a list of my contacts, and I've just got two text fields with a min width of 80 in there. But it's not looking particularly attractive right now. So first thing I'm going to do is select all of the elements in my repeating group, so my two text labels here, and I'm going to put them into a row. And I'm going to set the row to width 100%, and also height 100%. So now this group is basically taking up the whole of the repeating group cell. And that then means that padding I add to this will be applied uniformly around everything in the repeating group. I can also, on these, if I say min height 0, min height 0, I can then put them in the middle.

Adjust repeating group row height

Now, what is making the cell as high as it is? Because it isn't the elements in there, and it isn't this group, because this group is set to 100%. Well, that is going to be in appearance and min height of row. And so if I only want the row to be as tall as it needs to be for the elements, I just set this to zero. Let's have a look at that in the preview. Yeah, already looking much better.

Latest videos