Creating a hero section for your web app page in Bubble.io
In this Bubble.io tutorial we demonstrate how to create a 2 column hero section using the new Bubble responsive engine. This tutorial video includes how to create a layout that has 2 columns with the text and image element.
Create a stunning hero section: Learn how to use Bubble's new responsive engine to build an eye-catching two-column layout.
Master responsive design: Discover tips for creating responsive hero sections that look great on all devices.
Elevate your Bubble skills: Build professional-looking hero sections with proper alignment, padding, and responsive columns.
Creating a Hero Section in Bubble.io
Let's create a hero section for our Bubble app. In this tutorial, I'm going to be showing how to use the new responsive engine to layout content in a two-column hero section. So I have a blank page here. I'm using the new responsive engine and let's bring up the inspector by double-clicking on the page and we're going to layout. I'm going to set the width to quite a standard width used 1240 pixels.
Setting Up the Column Layout
I am then going to start building my column layout. You can see I've got an issue there which is that my layout is currently aligned to parent. I am going to want to allow my page using column and so now when I insert this group it's going to go into stacking on top of each other like a column. So I'll name this section hero and then change the container layout to a row because I'm going to be putting two columns in there. I want them to sit next to each other and then I'm going to set my width remove my min width. This is all part of building in a way that helps your application helps you translate your application to be being fully responsive much more easily.
Configuring the Hero Section
So then I'm going to say my max width is 1240 and then let's give this a slight background just so it's really clear. Okay, there we go and now I need to add my columns. So here's my first column. I'm going to name this left and this is going to contain a series of either text images one on top of each other so that is a column and then get rid of the fixed width and I'm just going to remove the min width for now.
Creating Two Columns
If I copy and paste my column you see I now have two columns and they're exactly sharing the space half and half because I've not got a statement here telling it to either fit to content or min or a max width. So that's going to work perfectly for what I want to do right now and rename that to right.
Adding Content to the Columns
Let's start putting some content into these columns. Let's take some text and we'll go for header one. So let's say "Welcome to my Bubble app" and so then on layout I want this to take up 100% of its container which is left column and I also don't want the height value to skew how I'm laying at my elements so I can remove that there. Now let's put in like a sub header so this can be my body text and we will just have set also set this to 100% so it takes 100% of the column and now let's get rid of that height there we go.
Adding an Image to the Right Column
Now I'm just going to put an image in on my other side and I'll just give it a border so that it shows up. This is also going to be 100% of my column and let's hit preview and see what it looks like.
Making the Hero Section Responsive
Okay, so there's some work we need to do in order to make this responsive because at the moment everything is kind of fixed to the left-hand corner. So let's work through that. In my hero section which has got the background color, my hero section's got these two columns nested inside it. I need to align this to the center. I think that's the one there we go now it's the center of the page.
Adding Padding for Better Appearance
I can also do a little bit of something with padding. So I'm on my hero section and a good rule of thumb 20 padding can go a long way. Okay, and you see that that has now brought in my content from the edge and that's really important. We'll unpack this in a future video but you can see on mobile my hero section is the gray one and it shrinks down to the hero section but then it keeps that gap. If I didn't have that 20 pixel padding then my text would be right up to the edge of the screen and that doesn't look good at all.
Adjusting Column Spacing
Final thing we can do on here is my columns are a little bit close now. I could use margins padding but I think that introduces just too much of a you want to keep things simple and so there's a simple way to do something which then isn't going to create you heaps of work later on then do it that way. So apply gap between elements this is the hero containing left and right column and then my column gap let's pin 30 and let's preview that.
Final Touches and Preview
Brilliant. Now I'm gonna do one final thing having said that the same thing a moment ago let's give this a fixed height. So get rid of height content and also we're actually saying max height 500 and then we want to put our columns in the middle and then get rid of that min height. So that way I've created a hero section. I think I've got I think it might be just being a little bit odd because I think because I'm using basically a placeholder there's no image there anyway you can see that I now have a two-column layout that will has got nice margins nice padding rather than the side it's centered. We have definitely 100% we've got the beginning of a hero layout here.
The best way to learn Bubble.io?
Start building with total confidence
No more delays. With 30+ hours of expert content, you’ll have the insights needed to build effectively.
Find every solution in one place
No more searching across platforms for tutorials. Our bundle has everything you need, with 500+ videos covering every feature and technique.
Dive deep into every detail
Get beyond the basics with comprehensive, in-depth courses & no code tutorials that empower you to create a feature-rich, professional app.

Frequently Asked Questions
Find answers to common questions about our courses, tutorials & content.
No. Our Beginner Essentials course and AI No-Code Coach are designed for total newcomers. You’ll learn Bubble.io step by step - no coding required.
Simply type your question in plain English, and our AI taps into the entire video library to recommend the exact lessons you need. It’s like having a personal instructor on demand.
As long as you’re subscribed! With our monthly subscription, you get unlimited access to all 500+ videos, our growing course library, and the AI No-Code Coach.
Your subscription includes:
- Bubble Beginner Essentials – Get up and running fast.
- Build a ChatGPT Clone – Integrate AI into your no-code apps.
- Build Your SaaS Website with AI – Learn to create a scalable startup site.
Plus, new tutorials every week!
The AI No-Code Coach is your first stop for instant answers. If you need deeper help, you can book 1:1 Bubble coaching for expert guidance.
Yes! If you don’t see real progress within 14 days, let us know, and we’ll issue a full refund—no questions asked.
Absolutely. Your subscription is month-to-month, and you can cancel anytime—no lock-ins, no hidden fees.
Absolutely. Your subscription is month-to-month, and you can cancel anytime—no lock-ins, no hidden fees.
If you’re serious about building a successful SaaS startup, check out Mastery—our intensive mentorship program. Mastery goes beyond Bubble.io development and includes:
- 1:1 mentorship to fast-track your progress
- Marketing strategies tailored for no-code founders
- Product management insights to scale your startup
- Personalized support from experienced founders