Introduction to using columns & rows in Bubble.io

Introduction to Laying Out Content in Bubble.io

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 practices for making your app responsive, meaning that it looks great on desktop, tablet and mobile.

Starting with a Basic Group

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.

The Problem with Fixed Layouts

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. I know it can feel familiar if you've used the old response engine, but when you're designing with Bubble, the best advice I can give is to use rows and columns as much as possible, aligned to parent infrequently and fixed actually never.

Using Aligned Parent Layout

Let's instead change the page to aligned parent and then we can see now that our orange, our red group is aligned into the center 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 a phone on 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.

Adding Content to the Group

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. 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 center to the page or is it aligned to the left or the right, the text is going to go with it.

Changing Layout to Column

Let's check out the layout tab on group and you'll see this is also set to fixed. 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.

Adjusting Padding and Width

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 your 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 a hundred percent. So that means that my text fills a hundred percent of the width of my shape taking into account my margins.

Understanding Padding and Margins

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. So that means that by applying 20 pixel padding all the way around it has applied 20 pixel padding around my text.

Working with Multiple Text Elements

Now what's going to happen if I copy and paste my textbox? Let's have a look. It goes below it and that's because my group here is set to column. 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.

Applying Spacing Between Elements

Let's bring them back to the top and place in another few instances of the textbox. 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 10 pixels I'd have to go through and make that change again for each one. There's a much easier way. With the new responsive engine you can apply spacing between elements and so if I put in 10 pixels it applies. It applies to 10 pixels.

Switching to Row Layout

What if I went on to row? So the row this time around it's aligning them all 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 10 pixels on the row but in order to get a gap between them I need to put 10 pixels as a column gap and you can see that it's now applied that gap.

Building a Header Navigation

You can already begin to see how this is how we go about like 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 a 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.

Creating More Complex Layouts

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 minimize 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. I'll remove the rest so we 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.

Conclusion and Best Practices

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.