Can I stack only two sub-buttons vertically while keeping the card single-row?

[smx71]

Goal

I’d like to stack Temperature above Humidity (two lines) on the right side of a Bubble Card, while keeping the other sub-buttons (e.g., a door sensor, light switch, etc...) in the default single-row layout. In short: two rows only for a subset of sub-buttons, not for the whole card.

Source Yaml

type: custom:bubble-card
card_type: button
button_type: switch
card_layout: large-2-rows
name: Salle à Manger
entity: light.salleamanger_spots
show_state: false
show_name: true
show_icon: false
scrolling_effect: false
sub_button:
  - show_state: true
    show_icon: true
    state_background: false
    show_background: false
    entity: sensor.salon_temperature_temperature
    show_name: false
  - show_last_changed: false
    show_icon: true
    state_background: false
    show_background: false
    show_state: true
    entity: sensor.salon_temperature_humidity
  - state_background: false
    show_background: false
    show_state: true
    entity: binary_sensor.salleamanger_porte_fenetre_contact
tap_action:
  action: toggle

Which step did you already try?

No response

Problem

card_layout appears to be a card-level setting (large, large-2-rows, large-sub-buttons-grid, etc.).
If I choose a two-rows layout (large-2-rows or grid with rows: 2), it applies to the entire card, which makes the card taller.
Home Assistant / the card config does not seem to allow two different card_layout values in the same card.

Read the documentation

• I have read the documentation

[Clooos]

Hi! large-2-rows is the one you're looking for, it allows 2 rows of sub-buttons on any 1 row Bubble Card 🙂

Isn't what's your looking for?

Edit: Sorry I skipped a part, this is indeed not possible by default, but I will see if this can be done (maybe with custom styles).

Edit 2: I missed the screenshot as well, I'm tired 🫠

[smx71]

Hi @Clooos
Thanks for the quick reply, and absolutely no worries (late-night replies happen ^^).
You’re right: "large-2-rows" works when everything is two rows. My specific goal is to keep the card visually single-row and stack only Temperature over Humidity on the right, while the other sub-buttons stay centered on one line.

You know... I’m chasing the mythical Home-Automation Spouse Acceptance Factor™: if the UI stays compact and obvious, my wife might actually use it… and I might keep my dashboard privileges :)

I did comb through the docs/issues/discussions and tried a couple of CSS/JS tricks, but nothing felt robust—and I’m definitely not a CSS wizard.

Would a per-sub-button / small group stacking option be feasible? I’m happy to test and provide feedback.

And thank you so much for Bubble Card — it’s awesome!

[Clooos]

I will see what I can do directly in the editor, whitout complexifying everything (or with a module?). This could be a really nice addition 👌