Getting Dash Bootstrap Components dropdown to work while using my own CSS from Codepen

Dash Python
1

I’m trying to make a multi page site with a dropdown menu to link to other pages. I used Codepen to do some of the CSS for my site.

If I want the dropdown to work, I have to put dbc.themes.BOOTSTRAP in my external stylesheets. (See below). When I do this is overrides alllllllllllll of the CSS I made on Codepen. I hate it. Is there anything I can do?

external_stylesheets = [‘https://codepen.io/almostburtmacklin/pen/QWWKEJb.css’, dbc.themes.BOOTSTRAP]

If you want to see my files let me know.

2

The stylesheets will be inserted in the order listed. So just swap the order!

external_stylesheets = [dbc.themes.BOOTSTRAP,"https://codepen.io/almostburtmacklin/pen/QWWKEJb.css"]

3

Thanks! That works, the only problem is that it over rides my DataTable CSS from codepen. It made my data table into an actual HTML table. Do you have any suggestions? Can I edit dbc.themes?

4

Yes you can customise the theme.

If you look at the source of dbc.themes you will find that BOOTSTRAP is defined as https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css. This is just the normal bootstrap CSS file.

So you can take the non-minified version of the bootstrap CSS, edit it and then include it in external_stylesheets. Or just override the table completely in your codepen css file.

5

Thanks! Should I override using the class names given when I look at the site via inspect?