Bubble gives us all the tools necessary to create any kind of layout that we like.

Let's scroll down to this group down here. I can see that the container layout is currently set to column.

I can use this drop-down and change it to row if I’d like, and this means that the container, being the Group feature-1, is controlling the layout of the child elements within, being the two text elements, and the icons. Let's change this back to a column.

So how would I do this in the real world? Well, I’ll probably create another group with these two elements. So group elements in a container. So why don’t we put these two elements in a row container. And then I can use my container alignment to move them to the center. I’m just going to make some small amendments here. I’m going to remove the margin, remove some margin here as well, and then I’m just gonna add some padding back. So what I’m doing is clicking on gap spacing to create universal spacing within this Group feature-1 and I can actually make that about 8.

So let's look at how I achieved this again. Over on the left-hand side, in the UI builder, I can see the highlighted group. Okay, I'm going to drag this out to make it a little bit bigger. So starting at the top and, in this group feature, we have a column layout so the child elements within Group feature-1 need to be stacked top to bottom. One of the child elements is a group and another one is a text element.

Now if in Group A, I change the container layout to a row, that's because I wanted the icon on the left and the text on the right-hand side.

I can use my keypad to basically move the text to the left if I'd like or move it back. I could also move this text to the top by using my up arrow and then move it back down.

Now you can see that we currently have a dark border around this group and this is a good thing because we don’t want elements bumping into each other. We want to create a bit of space. So if I scroll down the property editor in the Layout tab, I can see that I have margin to play with. Okay, and padding to play with. Now, padding is on the inside of a group and margin is on the outside.

So if I wanted to increase this padding, let's say padding bottom I wanted twice amount of space. I wanted 48 and you can see that it's pushed everything down the page to increase this bottom padding.

I can do the same on the top—48 on the top. And there you go! So maybe this is key feature number one and we need this group to be slightly larger than the other groups, and that's how you'd achieve it.

We'll cover margin in a later lesson.