Design

Learn about web design with Bubble.io and how to work with the new responsive engine.

Search

How to update Font Awesome to V6

The Bubble.io icon library is stuck with Font Awesome version 4 because V4 is not backwards compatibility with Font Awesome's most recent release version 6. In this Bubble tutorial video we demonstrate a work around that'll help you import the latest Font Awesome icons into Bubble.

How to set color hex code opacity in Bubble.io

In this Bubble tutorial video we share a quick color opacity trick at that came up in a Bubble Coaching call. Learn how you can make your hex code colors semi-transparent in this video.

Dynamic icons with Option Sets

In this Bubble.io tutorial we demonstrate how to use add Font Awesome icons to an Option Set and how to express a colour hex code within an Option Set.
Premium

Learn How to Easily Scrape Google Maps Data

Welcome to another in-depth Bubble tutorial where we delve into the integration of Serper.dev's Places API with Google Maps for a powerful and intuitive mapping experience.
Premium

Beginners Guide to Bubble.io Workflows

In this Bubble tutorial we provide a beginners guide to Workflows in Bubble.io including how to use a form to create new entries in the Bubble database and how to link these entries together in database relationships. We also explain at the end how to control the order of operations in Bubble.

Bubble.io Table Element Pagination with Numbers

In this Bubble tutorial we expand upon our last video tutorial explaining how to add pagination to the Bubble table element. This Bubble tutorial demonstrates how to add a number for the current page and total number of pages.
Premium

Advanced Timezones in Bubble.io

In this Bubble tutorial we'll be demonstrating how you can have more control over how Bubble and timezones work in your app.
Premium

3 ways to add data to a Repeating Group

Get started with our 3 ways to add data to a repeating group Bubble tutorial. We demonstrate how to make sure that your repeating group is populated with data when the page loads, how to change this data with a workflow and how to update the repeating group list using a conditional statement and custom state.
Premium

Pagination with the Bubble Table Element

In this Bubble tutorial we demonstrate how you can add pagination to the Bubble table element. The Bubble.io table element doesn't include the same set of expanded features as repeating groups. So here is our workaround.

100% Height Full Screen in Bubble.io

In this Bubble tutorial we demonstrate how you can use a few lines of CSS to force pages in your Bubble app to be height responsive, 100% height, 100% viewport.
Premium

How to create a IMDB clone in 30 mins

You can create no-code IMDB clone with Bubble in just 30 minutes. In this Bubble tutorial video we demonstrate how to cleanly layout content in Bubble using rows and columns, how to structure your database to make relationships between entries (e.g. Movies & Directors) and how to display data from your Bubble database in repeating groups and on pages.

How to add custom CSS to Bubble.io

Bubble is a fantastic no-code development platform. But sometimes you need a little code like CSS to perfect the design of your Bubble app. In this Bubble tutorial video we demonstrate 2 ways you can add custom CSS to your Bubble app.
Premium

Tips for Using Conditional Statements in Bubble.io

In this Bubble tutorial we demonstrate how you can use conditional statements to change the background color of content based on a numerical value. We create a series of traffic light color changes (red, green, yellow) to show low, medium and high values in our data.

Top 10 Bubble Tips that every Bubble Developer needs

In this video, we share top 10 tips that every Bubble developer (beginner or advanced) must know. This includes things such as what Bubble is good at, limitations of Bubble, Design tips, Dev and Live environments, Privacy and Security, and running apps as users.

The best navigation for one page Bubble app

Are you building a no-code one page Bubble app? How are you handling your navigation? In this Bubble tutorial video we'll explain why one page app navigation with custom states has limitations and how using Go to page... with URL parameters can improve your user experience.

Build your own nocode CRM with Bubble.io – Part 2

In this no-code development video we begin tutorial series demonstrating how you can build your own custom CRM with Bubble.io - all without writing a single line of code. Bubble.io is a powerful nocode web app creation platform. Watch to discover how to create a dashboard layout with a floating/sticky sidebar.

OpenAI Loading Animation - Using CSS

In this Bubble tutorial we demonstrate how to improve your Bubble app's UX (user experience) by showing a loading animation while you wait for a response from the OpenAI API (ChatGPT). This tutorial uses a CSS animation from loading.io.

OpenAI Loading Animation - Using Lottiefiles

In this Bubble tutorial we demonstrate how to improve your Bubble app's UX (user experience) by showing a loading animation while you wait for a response from the OpenAI API (ChatGPT). This tutorial uses a Lottie animation from Lottiefiles.

Build your own CRM with Bubble.io NoCode - Part 1

In this no-code development video we begin tutorial series demonstrating how you can build your own custom CRM with Bubble.io - all without writing a single line of code. Bubble.io is a powerful nocode web app creation platform. Watch to discover how to create a Registration and Login page for your SaaS app users.

Bubble table element - Sort by column

Here's one way you can customize the Bubble Table element. In this Bubble tutorial video we'll demonstrate how to create click to sort column headers.
Premium

Bubble UI Tips - Better Profile Pictures

In this Bubble tutorial we demonstrate 3 UI tips for improving your no-code Bubble app all centered around Profile Pictures. We use the Alphabet Profile Images plugin to add a placeholder thumbnail for conacts/users without an uploaded image, we show how you can quickly add the Picture Uploader to upload a new profile image to a Contact/User and we use Imgix to Auto crop around the face of the profile picture.