Any ideas how to change the background of the sub bubble only card? Tried all the css styles from the docs with no luck
Hello.
Do you know how to expand text (state) closer to edge (left and right side).
I try to use margin and padding od .bubble-state part, but it doesnt work.
Hey @Cloos, I made a dashboard strategy using Bubble Card: 🍬 Bonbon Strategy - A beautiful dashboard strategy. Fully automatic, yet extensible
Love your stuff! Thank you!
1 Like
Unfortunately it doesn’t work:
type: custom:bubble-card
card_type: button
button_type: switch
sub_button:
main: []
bottom: []
entity: light.group_all_lights
grid_options:
columns: 3
use_accent_color: false
force_icon: false
show_state: false
show_attribute: true
attribute: brightness
rows: "1.7"
card_layout: large
styles: |2
.bubble-button {
flex-direction: column;
justify-content: center !important;
align-items: center !important;
}
name: Lights
show_last_changed: false
Hi, DBunevich
try this:
type: custom:bubble-card
card_type: button
button_type: switch
sub_button:
main: []
bottom: []
entity: light.group_all_lights
grid_options:
columns: 3
use_accent_color: false
force_icon: false
show_state: false
show_attribute: true
attribute: brightness
rows: "1.7"
card_layout: large
styles: |
.bubble-button {
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
}
.bubble-name-container {
margin: 0 !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.bubble-name, .bubble-attribute {
text-align: center !important;
margin: 0 !important;
}
name: Lights
show_last_changed: false
1 Like
Thank you so much!
These are the commands which fixed the problem:
.bubble-name-container {
margin: 0 !important;
align-items: center !important;
}
1 Like
Hi, I currently have a custom button card configured as follows:
- type: custom:button-card
name: Add Event to Calendar
tap_action:
action: call-service
service: script.add_google_calendar_event
styles:
card:
- background-color: |
[[[
if (states['input_select.calendar_select'].state == 'option 1') return "#668be1";
if (states['input_select.calendar_select'].state == 'option 2') return "#fdbf6f";
if (states['input_select.calendar_select'].state == 'option 3') return "#e7ba51";
if (states['input_select.calendar_select'].state == 'option 4') return "#dd7835";
if (states['input_select.calendar_select'].state == 'option 5') return "#85ad59";
return "gray";
]]]
I am trying to use a Bubble Button instead to cut down on the number of custom components, however I cannot work how to apply the conditional, state-based style. I have tried some options but to no avail, the latest of which is:
styles: |-
.bubble-button-background {
background-color: >
[[[
if (states['input_select.calendar_select'].state == 'option 1') return "#668be1";
if (states['input_select.calendar_select'].state == 'option 2') return "#fdbf6f";
if (states['input_select.calendar_select'].state == 'option 3') return "#e7ba51";
if (states['input_select.calendar_select'].state == 'option 4') return "#dd7835";
if (states['input_select.calendar_select'].state == 'option 5') return "#85ad59";
return "gray";
]]]
}
I can achieve a fixed colour using:
styles: |-
.bubble-button-background {
background-color: rgba(12,120,50,0.5) !important;
Can anyone help, please?
EDIT: all sorted.
Bubble Card 3
v3.1.1
Hi everyone!
I’m back after a well deserved break with my family, and I feel great! 
Bubble Card v3.1.1 is a maintenance release focused on Home Assistant 2026.2 compatibility, along with other important fixes. This break also gave me time to think about many big ideas for v3.2.0 and the upcoming releases (my brain is never really resting… 
), but I will first focus on v3.1.2 to fix the remaining reported issues.
Just a quick additional note to say that I finally updated the documentation on GitHub, it was about time! And a huge thank you to all of you for the incredibly positive feedback, donations, and new Patreon subscribers since the v3.1.0 release! You’re all truly amazing 
Here’s the full changelog:
Bug fixes and improvements
-
HA 2026.2 compatibility:
Fixed some editor dropdown that were not working after the Home Assistant 2026.2 release. #2184 -
Pop-up scrolling on empty areas:
Scrolling inside pop-ups now works as expected when starting the scroll on empty areas. -
Calendar locale time format:
Fixed calendar cards defaulting to 12-hour clock despite a 24h locale. #1822 (PR #2121 by @wollew, thank you so much!) -
Sub-button CSS classes with special characters:
Fixed generated sub-button CSS classes not working correctly with some special characters (like “é”, “à”, “&”…). -
Mobile slider gesture abort:
Fixed sliders sometimes aborting the slide before releasing on mobile. #2167 #2161 -
Slider sub-button state locale formatting:
Fixed state on slider sub-buttons not using locale formatting. #2171 -
Slider sub-button visibility conditions:
Fixed visibility conditions for slider sub-buttons not working in all cases. #2170
Bubble News 
Over the past few years, I’ve been working on Bubble Card almost every day to make it the best it can be, and I still can’t believe how much it has grown in popularity. Watching the community getting this big and seeing so many people using my work has been incredibly rewarding
This is why I decided to create a Patreon as a way to offer something more for those who want to support me. A few days ago, I refreshed my Patreon with two new modules: Bubble Badges v2 (unlimited badges on any sub-button or the main icon) and Bubble Weather (animated weather backgrounds with daily/hourly forecasts). The custom dropdown module is still there if you want full control over labels, icons, and actions on select cards and sub-buttons.
I’m also finally happy with my own dashboard (there is a short video of it in this Reddit post), built entirely with Bubble Card v3.1.0 and only new custom modules I’ve been working on for months! Like one that adds unique colors and styles to all cards, one for the weather, one for graphs, square cards, time… I’ll release more of these modules soon, with a detailed post on Patreon and a new YouTube video. I would love to know what you think!
Thank you so much for being part of this amazing community, your support always makes a huge difference!
I’ve been wanting to start my own YouTube channel for a while, focusing on tutorials around Home Assistant and Bubble Card, and I really hope you will enjoy my videos. Don’t hesitate to subscribe to help give my channel more visibility. Thank you in advance!
I want to highlight that on the GitHub page, in the Discussions section, you can share and discover some amazing YAML examples from the community. Go check it out! Some of the creations are absolutely incredible!
And if you are interested I’ve opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:
Also, if you ever want to grab me a fresh beer, here are two easy ways
4 Likes
Hello guys,
Does anyone know if there is a way to re-activate a “scene” from the dropdown list if it has already been activated before?
At the moment, I have to create a dummy “blank” button that needs to be pressed before switching back to the scene, otherwise, the scene will not be triggered.
Hi! I used to be able to position the image inside ha-tile-icon so it could overflow outside the circular area (using card_mod + CSS like negative top/left). In older versions it worked and the icon/picture could “stick out” of the circle.
After updating, the same CSS no longer works: the image gets clipped inside the circle and cannot overflow anymore. I tried forcing overflow: visible on the card and on ha-tile-icon shadow parts, but it still clips—looks like a wrapper now applies overflow: hidden / clip-path / mask / contain: paint.
Was there a change that prevents overflow by design? If yes, is there an official way to allow elements inside the tile icon to overflow outside the circle again?
One more issue I noticed after updating to the new version:
Every time the dashboard (or pop-up) opens, Bubble Cards seem to reload / re-render, causing a visible refresh/loading behavior. This did not happen in older versions — cards were already rendered and appeared instantly.
Now it feels like the cards are being rebuilt on each open, which causes flickering and a short reload effect, especially noticeable on mobile and low-end tablets.
Is this an intended change in the new version, or could it be related to a regression / state handling update?
I would like to have the second bubble card (with my office image and the two sensors as sub buttons) replace the header. Meaning, I would like to have the close button on that bubble card. Is that possible?
Like so (but the close button being more translucent):
Does anyone know what to do?
