✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Block property for dbc.buttongroup


I am using a Dash Bootstrap Buttongroup and want it to cover the whole space it has.
For single buttons, there is the option to set the property “block” to True in order to have a button that spans the full width of its parent.

Is there a similar option for the Buttongroup? Or somebody has a workaround for this?

Thank you!

The dbc.ButtonGroup docs do not mention any such parameter, so I would just give the ButtonGroup some className and make new class in my css file.

So, initiating ButtonGroup with

import dash_bootstrap_components as dbc

button_group = dbc.ButtonGroup(
            [dbc.DropdownMenuItem("Item 1"), dbc.DropdownMenuItem("Item 2")],
    className='my-btn-group', # <---------- Added this

and then in the css/99_my_styles.css:

.my-btn-group {
  width: 100%;

Testing this on the ButtonGroup docs page seems to work:



You can use the Chrome Developer tools to check out the right css selectors and test the properties yourself. For example, seems that the width is not distributed equally if you have a Dropdown there (just try to edit some other CSS properties, perhaps ones for the dropdown element)

Hey Niko,

Thank you so much! That works exactly as I wanted. :slight_smile:

Best regards

1 Like