Responsive Engine

Everything you need to know about the Bubble New Responsive Engine. Responsive design ensures your Bubble web app looks amazing on desktop, laptop, tablet and mobile.

How to create a responsive header and mobile menu in Bubble - Bubble video tutorial thumbnail

How to create a responsive header and mobile menu in Bubble

In this Bubble tutorial video we demonstrate how to create a responsive header and mobile menu with the Bubble new responsive engine.

How to build a chat app with Bubble.io Part 1 - Bubble video tutorial thumbnail

How to build a chat app with Bubble.io Part 1

In this Bubble tutorial we explain how to build a chat app with Bubble between your Bubble app users. This first video in a 3 part series sets the foundation for adding user chat to your Bubble app by examining the UI, data structure and privacy rules you need for live chat between users.

Debugging the Responsive engine & Privacy Rules in Bubble - Bubble video tutorial thumbnail

Debugging the Responsive engine & Privacy Rules in Bubble

In this video I help one of our members restructure a page using the Bubble new responsive engine and debug why a piece of text isn't showing up. Spoilers: the Bubble privacy rules need updating.

Intro to Product listing page using Repeating Groups - Bubble video tutorial thumbnail

Intro to Product listing page using Repeating Groups

In this Bubble tutorial we build a simple product listing page using the Repeating Groups element. We explore how to add data to a Repeating Group element, how to style a Repeating Group and how to link the whole cell in a Repeating Group to a page displaying a single entry in our Bubble database.

Bubble's Responsive Design vs its New Responsive Design Engine - Bubble video tutorial thumbnail

Bubble's Responsive Design vs its New Responsive Design Engine

In this Bubble.io tutorial video we discuss the differences between the old UI Builder and the new Bubble Responsive Engine that launched in June 2022.

Bubble's New Responsive Design Engine: an Introduction - Bubble video tutorial thumbnail

Bubble's New Responsive Design Engine: an Introduction

In this Bubble.io tutorial video we give an introduction to the new Responsive Engine page builder.

Creating a hero section for your web app page in Bubble.io - Bubble video tutorial thumbnail

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.

Introduction to using columns & rows in Bubble.io - Bubble video tutorial thumbnail

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.

How to show & hide visual elements with Custom States - Bubble video tutorial thumbnail

How to show & hide visual elements with Custom States

In this Bubble.io tutorial video we demonstrate how using custom states to show and hide elements on your page can save your time and keep your app lean. In the second half of the video we take this app leanness a step further by explaining how Option Sets can save you time and from the pain of debugging typos.

How to import a Figma template into Bubble - Bubble video tutorial thumbnail

How to import a Figma template into Bubble

In this Bubble.io tutorial video, we explain how to quickly import a Figma template into Bubble.io and the reasons why you might decide to manually build the design instead.

Start building a web app today

Join our community of no-code app builders. Learn Bubble from our Bubble tutorial library and schedule 1 to 1 calls with our Bubble experts.
Get started free
menu