CODEWITHSUNDEEP
pythoncssbootstrap-4plotly-dash
Ger
Ger

Reputation: 259

Dash using local bootstrap stylesheet changes behavior

I have download a bootstrap theme css stylesheet from bootswatch and placed it in the assets folder of my app. The app is able to find the stylesheet as when I make minor changes in the stylesheet (e.g. increasing fontsize) this is showing up in my app.

Now I found out that not all parts of a bootstrap theme are working properly anymore after changing to the local stylesheet:

Am I missing a part of the bootstrap layout? The stylesheet I am using is copied from here.

Upvotes: 1

Views: 1255

Answers (1)

bas
bas

Reputation: 15722

I think the problem isn't the way you've included the styles, but the styles themselves (different versions).

There seems to be an incompatibility with the Bootswatch v5.0.1 stylesheet you linked and some of the dash bootstrap components (flatly) styles.

Let's look at the styles dash bootstrap components has available:

import dash_bootstrap_components as dbc

# Find themes available through dash_bootstrap_components
print(dir(dbc.themes)) # ['BOOTSTRAP', 'CERULEAN', 'COSMO', 'CYBORG', 'DARKLY', 'FLATLY', 'GRID', 'JOURNAL', 'LITERA', 'LUMEN', 'LUX', 'MATERIA', 'MINTY', 'PULSE', 'SANDSTONE', 'SIMPLEX', 'SKETCHY', 'SLATE', 'SOLAR', 'SPACELAB', 'SUPERHERO', 'UNITED', 'YETI', '_BOOTSWATCH_BASE', '__builtins__', '__cached__', '__doc__', '__file__', '__loader__', '__name__', '__package__', '__spec__']

# Find FLATLY theme url
print(dbc.themes.FLATLY) # https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/flatly/bootstrap.min.css

app = Dash(__name__, external_stylesheets=[dbc.themes.FLATLY])

So dash bootstrap components version 0.12.0 works with bootswatch flatly version 4.5.2 (And others most likely, but I have only tested these versions).

I compared the diff between the 5.0.1 and 4.5.2 styles and found that the 5.0.1 version doesn't have any .card-deck styles, but the 4.5.2 version does, which explains the CardDeck component not looking correct.

I recommend you to just use the dbc.themes.FLATLY theme to ensure compatibility with the bootstrap dash components and add extra styles as needed.

To reiterate the problem is not caused by using local stylesheets in the assets directory instead of external_stylesheets. Both these approaches work. Choose whatever approach you prefer.

Upvotes: 2

Related Questions