This is an introduction to laying out content in the new Bubble responsive engine. We're going to be covering just the basics of how to use groups to align your content and some best practises for making your app responsive - meaning that it looks great on desktop, tablet and mobile.
Positioning a group
So let's start by dragging a group into our empty page and let's just change the background of it so that we can see it more clearly. You'll see that the group has been placed exactly where I drew it on the page.
When you can see the margins around the edge 140 on the top, more the space between it and the edge of the page, 189 on the left hand side. It's not uniform, it's exactly where I drew it, which is really rough. And if I go into responsive and toggle between the different elements, well I can't and I can't adjust the size either and that's because my page is set to fixed. When you are designing an app with Bubble you really want to stay away from fixed as much as possible.
Avoid Fixed layout, always try for columns or rows
I know it can feel familiar if you've used the old response engine, but when you're designing a Bubble, best advice I can give is to use rows and columns as much as possible. Align to parents infrequently and fixed. Actually never in the apps that I've been building since the new response engine came out, I've never found the situation to use fixed and all it does is hinder your development into making your app responsive.
Align to parent
So let's instead change the page to aligned parent and then we can see now that our red group is aligned into the centre of the parent. And now that I've changed the page away from fixed, I can adjust the size as if going down to a phone or phone or landscape. But you'll see that my shape here doesn't change size at all. In fact, it begins to overflow the edge of the page.
So let's build on this and go back into the UI builder and let's say I want to add some content to this group here, like let's add in some text. And so by drawing the text within the group, if we look in the element tree and reveal it, you can see that the text is held within the group. So anything that is applied to the group in terms of is aligned, sent to the page or is it aligned to the left or the right? The text is going to go with it.
Let's check out the layout tab on group and you'll see this is also set to fix. Remember, avoid fixed. It will not make your app responsive. So we want to change this instead to a column and you'll see that it instantly fires my text to the top left hand corner because it's preparing for additional elements to be aligned in a column.
How to add margin and padding
So let's just make this look a little bit nicer. I'm going to apply some padding. And you'll see that's moved the element in of my text. And then let's get rid of the min height there. And there you see it brought the bottom in. Basically with responsive, you want to kind of hold the content of your page as closely as possible, getting rid of any extra, because that will just cause issues with it once your page grows or shrinks down.
Then on width, I'm going to make that 100%. So that means that my text fills 100% of the width of my shape, taking into account my margins. Sorry, there we go again. Messed up myself. Padding. Okay.
Padding is inside the shape. Margins are outside. So if I apply margins, then it's going to apply spacing on the outside of my red shape, my group A. If I apply padding to group A, it applies on the inside. Okay.
So that means that by applying 20 pixel padding all the way around, it has applied 20 pixel padding around my text. So let's make this a little bit easier to see.
Make it white. Okay. Now what's going to happen if I copy and paste my text box? Let's have a look. It goes below it, and that's because my group here is set to column.
Container alignment
Now, why is it aligned to the top? Well, that's because I've said align elements to the top. That's the default. But if I go align to the middle, it aligns them in the middle. Or I can align to the bottom, or I can say equal spacing on either side, or I can say equal spacing between.
When to use gap instead of margin or padding
Let's bring them back to the top and place in another few instances of the text box. What about if I'd like to apply some spacing between each of these elements? Well, I could go in and apply a margin to the bottom, but then I'd have to go and apply that margin to the bottom of each of them. And then if I wanted to change that from ten pixels, I'd have to go through and make that change again for each one. There's a much easier way with a new responsive engine.
You can apply spacing between elements. And so if I put in ten pixels, it applies excuse me, it applies to ten pixels. Now, what's really helpful about this is that it's not adding ten pixels to the bottom. It's only adding ten pixels between every element.
Let's shake things up. What if I went onto a row? Okay, so the row this time around, it's aligning the mall to the left hand side, preparing to lay out as a row. But it's not appearing as a row because I'm telling each of these elements to take up 100% of the width. So if I take out 100% and say fit to content, and then just to make it easier, delete all of those and then copy and paste this one. I now get them all in the row.
And I can do exactly the same principle with the applying spacing between elements because I've still got ten pixels on the row. But in order to get a gap between them, I need to put 10 px as a column gap. And you see there it's now applied that gap.
So you can already begin to see how this is how we go about building a header because we want in our header navigation, we want a series of text buttons or links aligned in a row. If we wanted a navigation that was like a left hand column, then we can, you can see we can use the column and it lines it all out in a column.
How to create a 2 column layout
Now, to conclude this video, how would we go about making it a little bit more complicated? For example, let's make this piece of text much bigger. And then let's say we want these two to appear over here. So we would group these into a column because we still want them on top of each other. And then remember, we're trying to minimise the extra space that's added.
We want to define it ourselves manually rather than Bubble guessing at it. So that's why I'm removing the min height there, then I'll remove the rest. So we've still got our group A, our red shape in a column, but now if I put it in a row and then let's have a look at our inspector. You can see here that the row is applied to text A and group B, but within group B, group B is set to a column.
Okay, now this is just like the bare basics of how to lay out elements in the Bubble editor.
There is still a lot that will be covered in future videos, but it is really just to implore you as you're starting out in building a Bubble app: don't use fixed, rarely use a line to parent.
Mostly get used to using columns and rows in order for your app to more naturally transition into a fully responsive web app.
