How to add custom CSS to Bubble.io

Adding Custom CSS to Bubble.io

Bubble is a fantastic No Code web app development tool, but sometimes you just can't get there without using a little bit of custom CSS. In this video, I want to show you the two places that you can add custom CSS really easily to your Bubble app and I'll explain the difference between the two. Now if you're learning Bubble and you want to continue and accelerate your Bubble development journey, we'd really appreciate a like and subscribe on this video and you can find videos on our website, PlanetNoCode.com, that are exclusive to our members, so head over there, PlanetNoCode.com, but let's add a little bit of custom CSS to our Bubble app.

Demonstrating Custom CSS in Bubble.io

I'm going to demonstrate basically changing a bit of text. Now of course you can do that based on the inspect tool that's provided here, you can change all the elements that you'd want to about the text, but there are some reasons why you might want to add custom CSS, maybe you want a custom grid layout, maybe you've seen someone post a snippet online, just to get that perfect design that you're going for. So I'm going to hit preview and go about customizing this.

Using Browser Inspect Tools

So I'm going to right click, bring up the browser inspect tools and at the moment there's no way for me to directly target. So I'm going to add in an ID attribute and this is a way of basically injecting a name or a label into the code that makes up the web page. So I'll just say my text, an ID attribute ideally should be unique because an ID in CSS is used to target a unique element, whereas the class is used to target more than one element. But I have found myself especially with styling repeating groups using custom CSS, I will use the same ID across them because I want to apply the same style, so it does sort of break the rules a bit.

Adding Custom CSS to Bubble.io

But yeah we've got my text and so then if I go back to the preview here, we'll see that the ID has been added to the div which contains the text there. So if I go back into Bubble, here is one place that you can add custom CSS and that is on the page level and you want to load CSS early in the page loading process because otherwise you'd get content shift or content shuffle, things load in, they change their look as they load in, it's poor user experience.

Adding CSS to the Page

So let's add some into the page up here. So we open up a style tag and in fact I'll immediately close the style tag and we want to target the ID that we just created. So to target an ID we use the hash sign and then I'm writing my ID, my text and I will let's just go color and I'll try it pink. You could of course put a hex color or even a semi-transparent color in here.

Overriding Bubble's Default Styles

Preview, okay and you'll notice that it hasn't worked. In fact we can look and see in the browser developer tools that we're kind of going against Bubble. Of course Bubble wants you to set the color in the like the topography section of the inspector but we're kind of brute forcing something across and you can see that actually in the hierarchy of CSS this is being ignored because color set here is taking precedent.

Using !important in CSS

Now this is how you go to the next level of brute forcing CSS and again this is not really a best practice but sometimes you just need to put importance in there and that's basically telling the browser that when it looks through all the CSS, all of the mentions about this element and what color it should be, it's saying actually pink is the most important attribute for the color and for the text. So let's refresh that and you see now it's changed to...