Bubble.io Custom CSS : everything you need to know (2024)

Although Bubble gives you plenty of design possibilities, you can sometimes hit its limits.

Well, the good thing is that in Bubble, you can add custom CSS to push back these limits and leverage the power of CSS.

In this article, we are going to cover everything you need to know to add Custom CSS in Bubble.

And if you want to go further in Bubble, you can read our article on how to blur elements in Bubble.

Step 1 - Installing the free plugin Classify

The first (and mandatory) step to add custom CSS in Bubble is to install the free plugin Classify.

This plugin enables us to add and remove CSS Classes to any Bubble element, which will come in handy later on.

So go ahead and install it to your app.

Step 2 - Exposing HTML ID Attributes

The other mandatory step will be to enable the option to expose HTML ID Attributes in Bubble.

To do this, head to your app's Settings, go into the General tab and check the "Expose the option to add an ID attribute to HTML elements".

Now that this option is checked, you will see this new input in your elements property panel :

This is where we are going to add our Custom CSS Classes later on.

Step 3 - Understanding our CSS works

Alright, now that our app is ready, let's take a preliminary look at how CSS generally works.

If you are not familiar with it, CSS, which stands for Cascading Style Sheets, is a language used to describe the presentation of a webpage written in HTML.

It controls how the webpage's content is displayed, including layout, colors, fonts, and more.

But it also gives a lot more possibilities, for example, you can use CSS to create animations.

Related Article : Building an infinite carousel in Bubble.io (for free) - 2024

Let's take a look at an example CSS Code :

<style>
.box {
    border: 2px solid red;
    padding: 20px;
    margin: 10px;
    background-color: lightblue;
    text-align: center;
}
</style>

The code above is a fairly basic bit of CSS.

What is does is that it styles the components that have the "box" CSS Class applied to them by giving them a 2px Border, 20 px of Padding, 10 px of Margin and a Background Color.

Nothing too fancy, right ?

Well, that's pretty much all there is to understand with CSS.

You have a selector (which in this case is the "box" class), and some properties that are applied to this selector.

Step 4 - Understanding our Classify Works

Now that we know how CSS basically works, let's take a closer look at how our plugin works.

If you want to take a look at the plugin's documentation, you can find it by clicking here.

The sole and only purpose of Classify is to enable you to give any of your Bubble element a CSS Class (and remove it if needed).

To do this, the plugin comes with 3 Commands :

• {addClass}
• {removeClass}
• {tempClass}

The first two are pretty self explanatory, {addClass} is used to add a CSS Class to an element and {removeClass} is used to remove a CSS Class from an element.

How to format these commands?

Now that we know the relevant commands, let's see how to properly write them.

Because yes, how you format these commands when writing them down is important, so you need to make sure to follow this step.

Here is how the correct formatting looks like :

{addClass: "yourClassName"}

{removeClass: "yourClassName"}

As you can see, Class Names are between double quotes, and there is a space between the addClass: and the actual class name.

Now, when it coming to adding css, you may want to add several CSS Classes to your element.

Or even remove several classes for your element.

To do this, simply repeat the step, and add the relevant classes like so :

{addClass: "class1 class2 class3"}

Nothing too complicated, right ?

Step 5 - Adding your CSS code to your Bubble.io app

Alright, now that we know how to give our elements a CSS Class, we need to add the actual CSS Code to our application.

Otherwise, our Classes won't do much.

There are a few different ways to do this in Bubble, and you need to make sure to choose the most adapted one for your use case.

In this example, I'll be using this fairly simple bit of CSS :

<style>
.gradient {
background: rgb(23,35,62);
background: linear-gradient(90deg, rgba(23,35,62,1) 0%, rgba(66,98,255,1) 35%, rgba(0,212,255,1) 100%);
}
</style>

1/ In your Page Header

The first way of adding your CSS Code is to add it directly to your Page Header.

To do this, simply click on your Page in the Element Tree, and find the section "Page HTML Header".

Now, go ahead and paste your code.

ATTENTION : You need to make sure that your code is wrapped between <style></style> tags (which are called "style tag") ! Otherwise, it won't work.

Now, this method is great when you don't need to use this code across your whole app (or at least on not too many page).

Because the issue with this method is that the CSS Code we pasted will be usable on THIS PAGE ONLY.

So, if you need to use this code across several pages, you should take a look at the second approach.

2/ In your App Header

This approach is pretty similar to the first one.

However, the biggest difference is that we won't paste our CSS Code into a unique page, but on every page of our app.

So this is great approach is you need to use this code across several pages. Instead of having to paste it several times on each pages, you only have to do it one time, which is much more practical and way easier to maintain.

However, make sure to use it wisely. Useless code will add weight to your app, which can lead to a less performant app, so be careful !

To use this approach, go to your App Settings --> SEO/Metatags --> and find the "Script/Meta tags in Header" section

Once you've found this section, go ahead and paste your code.

ATTENTION : Once again, make sure to wrap your CSS Code in <style></style> tags !

And there you go, now your CSS Code is usable across your whole app !

3/ In an HTML Element

Our first approach will be to simply add our CSS Code through an HTML Element.

To be clear, this approach is very similar to the first one, because it adds the CSS Code to the page on which the HTML Element is present.

So most of the times, you won't really need to use this approach.

However, it can be useful for some cases, when you can't actually paste code in the page header.

For example, if you need to add CSS Code within a Reusable Element :

In fact, reusable elements do not have Headers. So to make it work, you would need to add the relevant CSS Code to your whole app, or on specific pages, but that would not be very clear and easy to maintain.

Therefore, this third approach would make great sense in this case !

To make it work, simply Drag and Drop an HTML Element and paste the CSS Code inside of it :

Once again, make sure to wrap your CSS within <style></style> tags !

And there you go, your code is added to your element.

However, you need to make sure of one things with this approach : the HTML Element must not be hidden !

In fact, the code within this HTML Element adds some CSS to the style sheet of the page. 

However, if the HTML Element is hidden, the CSS will not be added to the page, and therefore won't work.

So you need to make sure that the element is visible.

What you can do however, is to set it's Width and Height to 1px.

This way, it won't disturb your app's layout.

Real case example

Alright, now that we have the theory, let's take a look at a real example.

Let's imagine that we want to add custom background elements to our Bubble app like one of these :

These backgrounds are accessible on this CSS Background Generator and are made using CSS only, they are not images.

Okay, so let's select the "Circles" background, and take a look at the code the website gives us :

background-color: #e5e5f7;
opacity: 0.8;
background-image: radial-gradient(circle at center center, #444cf7, #e5e5f7), repeating-radial-gradient(circle at center center, #444cf7, #444cf7, 10px, transparent 20px, transparent 10px);
background-blend-mode: multiply;

As you can see, the website only gives us the CSS Properties.

This code doesn't have a CSS Class attached to it, so let's correct this and add one :

.background {
    background-color: #e5e5f7;
    opacity: 0.8;
    background-image: radial-gradient(circle at center center, #444cf7, #e5e5f7), repeating-radial-gradient(circle at center center, #444cf7, #444cf7 10px, transparent 20px, transparent 10px);
    background-blend-mode: multiply;
}

There we go, that's already much better !

We've added the "background" class selector to our CSS, so that it will be applied to every elements that has the CSS Class "background" attached to it.

Now, remember that we will need to add <style></style> tags to our code in Bubble to make it work.

Alright, now let's head over to our Bubble app and our code to it.

In this case, I'll add it to the Page Header, because I only need it on a particular page.

Alright, now that our code is present on the page, we need to add the CSS Class to our element.

In my case, I'm going to add the CSS Class to a Group Element, to modify it's background :

As you can see above, I've used the {addClass} command to add the class "background" to my element.

And there we go !

Now if we hit preview, here is what it looks like :

All good ! My group element has got it's brand new background.

Conclusion

And there you go !

You now know how to use Custom CSS in Bubble.io.

Remember that this can help you improve you website design, but that if used wrong, it can also deteriorate your User Experience.

So make sure to keep your head cool with it!