[Styling Module] Sub-buttons below - normal layout

[HyperCriSiS]

Subbutton_Below_Normal_Layout

Version: v2025.03.07
Creator: HyperCriSiS (Modified from MrBearPresident's original, optimized for large layout)

Important

Unsupported cards:

• horizontal-buttons-stack
• pop-up
• empty-column

This module adds all the necessary CSS to move the subbuttons below the main content in normal layout cards. It gives the main feature and title more room while positioning subbuttons in a row at the bottom.

Configure this module via the editor or in YAML, for example:

type: custom:bubble-card
card_type: button
modules:
  - default
  - subbutton_below_normal
entity: light.schlafzimmer
sub_button:
  - entity: light.schlafzimmer
  - entity: light.schlafzimmer
  - entity: light.schlafzimmer
  - entity: light.schlafzimmer
  - entity: light.schlafzimmer
  - entity: light.schlafzimmer
  - entity: light.schlafzimmer
  - entity: light.schlafzimmer
card_layout: normal
button_type: slider
grid_options:
  columns: 12
  rows: 2

---

🧩 Get this Module

To use this module, simply copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

subbutton_below_normal_layout:
    name: Sub-button below (normal layout)
    version: "v2025.07.03"
    creator: "HyperCriSiS (Modified from MrBearPresident's original, optimized for large layout)"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1315"
    description: This module adds all the necessary CSS to move the subbuttons below the main content in normal layout cards. It gives the main feature and title more room while positioning subbuttons in a row at the bottom.
    unsupported:
      - horizontal-buttons-stack
      - pop-up
      - empty-column
    code: |
          :host{
            --row-size-copy: var(--row-size,1);
          }

          /* Normal layout styles */
          .bubble-button-card, .bubble-climate, 
          .bubble-select-card, .bubble-separator, 
          .bubble-cover-card-container{
            display: grid;
            grid-template-areas:
              'i n a'
              'b b b' !important;
            grid-template-columns: auto 1fr auto;
            grid-template-rows: 50px 50px;
            justify-self: start;
            justify-items: start;
            align-self: center;
            align-items: center;
            width: 100%;
            gap: 0px;
            height: 100px;
          }

          .bubble-cover-card-container .bubble-header {
            display: contents;
          }

          .bubble-cover-card-container .bubble-buttons {
            display: flex;
            align-self: center;
            grid-area: a !important;
            right: 0;
            padding: 0 18px 0 0;
          }

          .bubble-separator.separator-container{
            grid-template-columns: auto auto 1fr;
          }

          .bubble-media-player{
            display: grid;
            grid-template-areas:
              'i n a1 a2 a3 a4 a5'
              'b b b b b b b' !important;
            grid-template-columns: auto 1fr auto auto auto auto auto;
            grid-template-rows: 50px 50px;
            justify-self: start;
            justify-items: start;
            align-self: center;
            align-items: center;
            height: 100px;
          }

          .bubble-climate .bubble-button-container{
            grid-area: a;
            display: contents !important;
          }

          .bubble-climate .bubble-temperature-container{
            grid-area: a;
            height: 30px;
            width: auto;
            justify-self: center;
            margin-right: var(--gap-to-edge,7px);
          }

          .bubble-select-card > .bubble-dropdown-container{
            grid-area: a;
            display: contents !important;
          }

          .bubble-select-card .bubble-dropdown-arrow{
            grid-area: a;
          }

          .bubble-media-player-container .bubble-power-button{
            grid-area: a1;
            margin: 0px 6px;
          }

          .bubble-media-player-container .bubble-previous-button{
            grid-area: a2;
            margin: 0px 6px;
          }

          .bubble-media-player-container .bubble-next-button{
            grid-area: a3;
            margin: 0px 6px;
          }

          .bubble-media-player-container .bubble-volume-button{
            grid-area: a4;
            margin: 0px 6px;
          }

          .bubble-line{
            grid-area: a;
            width: 100%;
          }

          .bubble-media-player-container .bubble-play-pause-button {
            display: flex;
            height: 38px;
            width: 38px;
            padding: 0;
            grid-area: a5;
            align-items: center;
            justify-content: center;
            margin: 7px 7px 7px 6px;
          }

          .bubble-media-player-container .bubble-button-container{
            grid-area: a1;
            display: contents;
          }

          .bubble-name-container {
            justify-content: flex-start;
            grid-area: n;
            overflow: hidden;
            max-width: calc(100% - 2 * var(--gap-to-edge,7px));
          }

          .bubble-sub-button-container {
            max-width: calc(100% - 20px);
            height: 50px;
            min-height: 38px;
            grid-area: b;
            justify-self: center;
            align-self: center;
            justify-content: center;
            align-content: center;
            justify-items: center;
            margin: 0;
            left: 0;
            right: 0;
            display: flex !important;
            flex-wrap: wrap;
            gap: 8px;
            overflow: visible !important;
          }

          .bubble-icon-container {
            grid-area: i;
          }

          /* Adjust sub-buttons styling */
          .bubble-sub-button {
            margin: 0 !important;
          }

          /* Keep large layout support */
          .large .bubble-button-card, .large .bubble-climate, .large
          .bubble-select-card, .large .bubble-separator, .large
          .bubble-cover-card-container{
            grid-template-rows: var(--row-height,56px) 1fr;
          }

          .large .bubble-climate .bubble-temperature-container{
            height: calc(var(--row-height,56px) - 20px);
          }

          .large .bubble-sub-button-container {
            --row-size: calc( var(--row-size-copy) - 1);
            max-height: calc(100% - 20px);
          }

          .large .bubble-media-player-container .bubble-play-pause-button {
            height: 42px;
            width: 42px;
          }

          /* Increase container height to accommodate sub-buttons */
          .bubble-button-card-container,
          .bubble-cover-card-container,
          .bubble-climate-container,
          .bubble-select-card-container,
          .bubble-media-player-container {
            height: 100px !important; /* Fixed height to show both rows without scrolling */
            min-height: 100px;
            padding-bottom: 0;
            overflow: visible !important; /* Ensure content isn't cut off */
          }

---

Screenshot:

• I really enjoyed working on this module ❤️

[YordiDR]

The layout is broken since bubble card 3.0.0 or HomeAssistant 2025.7, i'm not sure which one is the culprit.
It was fixed in MrBearPresident's original module.

The change adopted for this module is as follows (add position: relative)

          /* Normal layout styles */
          .bubble-button-card, .bubble-climate, 
          .bubble-select-card, .bubble-separator, 
          .bubble-cover-card-container{
            position: relative;
            display: grid;
            ...

[azilberbaum]

Looks like it to me:

[YordiDR]

I think you have a different issue, my issue was that the card it's content & sub-buttons were heavily off-centered (the content was above the card itself and the sub-buttons were at the top of the card). Your issue is that the sub-button row never goes below the content, i didn't see this but i use a different layout:

[le89le]

Il layout è rotto a partire dalla versione Bubble Card 3.0.0 o da HomeAssistant 2025.7, non sono sicuro di quale sia il problema. È stato risolto nel modulo originale di MrBearPresident.

La modifica adottata per questo modulo è la seguente (aggiungere posizione: relativa)

          /* Normal layout styles */
          .bubble-button-card, .bubble-climate, 
          .bubble-select-card, .bubble-separator, 
          .bubble-cover-card-container{
            position: relative;
            display: grid;
            ...

ciao, non ho capito dove va modificato lo yaml.
Puoi gentilmente postarlo? Pure io ho il problema di vedere decentrati tutti i sotto bottoni.
grazie

[azilberbaum]

This module does work, here is what I learned:

1- I am using the “Large” card layout
2 - I am using card type of “Button” and button type of “State”
3 - I created 4 sub buttons they display below everything prefectly!

I think my big issue was using a Cover card and the action buttons messed it all up and would not move to the second row. It would be nice, but instead I re-created the standard Cover action buttons as sub-buttons.

hope this may help someone

also would love to see an option to have the action buttons move to the second row as well

here is my final card

also when using this module the scrolling texts breaks for the name

[azilberbaum]

Also here is the full module code just in case:

:host{
--row-size-copy: var(--row-size,1);
}

.large .bubble-wrapper {
position: relative;
display: grid;
grid-template-areas:
'i n a' 'b b b' !important;
grid-template-columns: auto 1fr auto;
grid-template-rows: var(--row-height,56px) 1fr;
justify-self: start;
justify-items: start;
align-self: center;
align-items: center;
width: 100%;
gap: 0px;
}
.large .bubble-content-container {
justify-content: flex-start;
grid-area: n;
overflow: hidden;
max-width: calc(100% - 2 * var(--gap-to-edge,7px));
}
.large .bubble-sub-button-container {
--row-size: calc( var(--row-size-copy) - 1);
max-width: calc(100% - 20px);
max-height: calc(100% - 20px);
grid-area: b;
justify-self: center;
align-self: center;
justify-content: center;
align-content: start;
justify-items: center;
margin: 0;
left: 0;
right: 0;
}
.large .bubble-buttons-container{
grid-area: a;
}

[azilberbaum]

Yaa I can never get it to go to the seocnd row

Here is the Yaml:

type: custom:bubble-card
card_type: cover
entity: cover.green_room_7_blind
show_state: true
show_last_changed: false
show_last_updated: false
show_attribute: true
sub_button:

• entity: cover.green_room_7_blind
  icon: mdi:star-circle-outline
  show_background: false
  show_name: false
  name: Open
  tap_action:
  action: perform-action
  perform_action: scene.turn_on
  target:
  entity_id: scene.green_room_blind_7_favorite
  show_icon: true
  show_state: false
  show_last_changed: false
  show_attribute: false
  button_action: {}
  name: Green Room 7 Blinds
  icon_open: ""
  icon_close: ""
  card_layout: normal
  attribute: current_position
  modules:
• conditional_icon
• get_state_attribute
• home-assistant-default
• subbutton_below_normal_layout
  conditional_icon:
  conditions:
  • condition: or
    conditions:
    • condition: state
      entity_id: cover.green_room_7_blind
      attribute: current_position
      state: 100
    • condition: state
      entity_id: cover.green_room_7_blind
      attribute: current_position
      state: 0
      icon_true: mdi:blinds-horizontal-closed
      icon_false: mdi:blinds-horizontal
      advanced_settings:
      color_true: grey
      color_false: blue
      show_icon: true
      get_state_attribute:
• entity: sensor.green_room_7_blind_position_status
• entity: cover.green_room_7_blind
  attribute: current_position
  icon_container_color:
  color: white
  grid_options:
  rows: 2
  columns: 6

[YordiDR]

Did this ever work for you? I'm not sure about your yaml, some stuff like the module definition is in a different place than mine, this is my yaml:

card_type: button
modules:
  - get_state_attribute
  - subbutton_below_normal_layout
card_layout: normal
grid_options:
  columns: 6
sub_button:
  - name: Verlichting
    light_background: true
    tap_action:
      action: navigate
      navigation_path: "#garden-lights"
    hold_action:
      action: navigate
      navigation_path: "#garden-lights"
    icon: ""
    show_background: true
    state_background: true
    show_icon: true
    entity: sensor.garden_light_on
    show_last_changed: false
    show_state: false
  - name: Extra
    show_background: false
    state_background: false
    tap_action:
      action: navigate
      navigation_path: "#garden-extra"
    hold_action:
      action: navigate
      navigation_path: "#garden-extra"
    icon: mdi:plus
button_type: name
rows: "2"
name: Tuin
icon: mdi:shovel
show_name: true
show_icon: true
get_state_attribute:
  - entity: weather.forecast_home
    attribute: temperature
  - entity: weather.forecast_home
    attribute: humidity
  - attribute: wind_speed
show_attribute: true
button_action:
  tap_action:
    action: none
  hold_action:
    action: none
styles: |-
  .background-off {
    background-color: rgba(0,0,0,0) !important;
  }

[azilberbaum]

I just got it yesterday and no :(

Are you on 3.0?