Introduction to using columns & rows in Bubble.io
In this Bubble.io tutorial we demonstrate the importance of using columns and rows (instead of Fixed layout) in the new Bubble Responsive engine. If you're a Bubble beginner this is a great video to start with as understanding these key concepts will save you lots of time as you build more pages into your no-code web app.
Master Bubble's responsive design: Learn the secrets of responsive layouts using groups, rows, and columns!
Unlock the power of Bubble's new engine: Discover how to create responsive apps that look great on all devices!
Avoid fixed layouts and embrace flexibility: Learn why using rows and columns is key to building truly adaptive Bubble apps.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.