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.
Unlock the power of custom CSS: Learn two easy ways to add custom styles to your Bubble app!
Master Bubble's CSS hierarchy: Discover how to override default styles and create pixel-perfect designs using the !important rule.
Take your responsive design to the next level: Learn how to use custom CSS for advanced layouts and seamless user experiences.
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...
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.