How to edit Dash bootstrap stylesheet?

Dash Python
1

Hello,
I need to edit the CSS stylesheet imported at the beginning of my app to include the following:

/* restyle radio items */
.radio-group .form-check {
  padding-left: 0;
}

.radio-group .btn-group > .form-check:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.radio-group .btn-group > .form-check:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}

as I want to reproduce the example “RadioItems as ButtonGroup” in the Dash Bootstrap documentation: ButtonGroup - dbc docs

I don’t know anything about CSS and I’ve never edited the stylesheet I import at the start of the app:
app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

Could someone please explain how I can add the CSS above to the stylesheet that gets imported at the start of the app so my grouped radioitems actually look grouped? Right now they get displayed as separate buttons.

Thank you very much.

2

Hi @cl_frp

You would just need to add that css to a file in the assets folder. You can find more information about how to do that here:

2 Likes