Can't apply dbc.themes.BOOTSTRAP

Dash Python
1

Hi everyone, I had a problem when I applied dbc.themes.BOOTSTRAP.
I want to use Modal and I follow up with an example at dbc.Modal .
I copied the example code and tried to run but it isn’t working. Nothing shows up.
I watched my app log and saw:
GET /assets/3-col-portfolio.css?m=1684812857.643925 HTTP/1.1" 304
GET /assets/bootstrap.css?m=1683180915.0 HTTP/1.1" 304
GET /assets/s1.css?m=1683192635.0 HTTP/1.1 304
GET /assets/style.css?m=1683192635.0 HTTP/1.1" 304
I think that is the reason make my app is not working? Is that right? and can you give me solutions to fix it

import dash
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    [
        dbc.Button("Open modal", id="open", n_clicks=0),
        dbc.Modal(
            [
                dbc.ModalHeader(dbc.ModalTitle("Header")),
                dbc.ModalBody("This is the content of the modal"),
                dbc.ModalFooter(
                    dbc.Button(
                        "Close", id="close", className="ms-auto", n_clicks=0
                    )
                ),
            ],
            id="modal",
            is_open=False,
        ),
    ]
)


@app.callback(
    Output("modal", "is_open"),
    [Input("open", "n_clicks"), Input("close", "n_clicks")],
    [State("modal", "is_open")],
)
def toggle_modal(n1, n2, is_open):
    if n1 or n2:
        return not is_open
    return is_open

if __name__ == "__main__":
    app.run_server()
2

HI @impossibleno1 welcome to the forums.

Hard to tell without mor information concerning your app. Did you run with app.run(debug=True) ? Do you get any errors?

3

Hi @AIMPED , I didn’t get errors with app.run(debug=True).
But I checked Chrome Developer Tools and I got Failed to load resource: net::ERR_FILE_NOT_FOUND dom.js:1.
I tried many different ways to apply Bootstrap (I follow up with https://dash-bootstrap-components.opensource.faculty.ai/docs/ ) but it’s still not working.

4

Hello @impossibleno1,

What versions of these are you running?

5

Hi @jinnyzor , I used: dash 2.9.1, dash_bootstrap_components 1.4.1

6

Hmmm.

Maybe try reinstalling them?

Also, try updating to 2.9.2 or I think 3?

7

Thank you for your solution, but it still doesn’t work.
I try to reinstall with Dash latest version 2.10.2

8

Still the same error of dom.js not found?

What do you have in your assets folder? Anything?

9

Yes, It is still the same error and I don’t have an assets folder.
When I checked more deeply with dom.js in Chrome Developer Tools, dom.js is duplicated.
One has nothing and one has some code (image below).

image
image1320×984 36.8 KB

10

Try updating dbc to 1.5+

11

I installed dbc from pip and the latest version is 1.4.1. I can’t find dbc 1.5+

12

Hi, are you using virtual environments?

And by updating / installing do you first remove the existing version and reinstall again, or you just run install again (if so, it will just tell you the pre-reqs are met and nothing changes). I had this one time where it wouldn’t actually correct whatever was wrong.

I would recommend just to try to start from zero. Clean directory, clean virt env. And install the dependencies again. See if a basic dbc example works without modal, and then with it.

Wherever it fails you know at least where to look.

Reg,
J.

1 Like
13

Hi @jcuypers ,
Thank you for your solutions. I did exactly what you said when I reinstalled or upgraded the existing library but it didn’t work.
I created a new virt env and started from zero but it still failed.

14

Hi, can you please confirm a very basic dbc example works (forget temporarily about the modal).

Something like:

import dash
import dash_bootstrap_components as dbc

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    dbc.Alert("Hello Bootstrap!", color="success"),
    className="p-5",
)

if __name__ == "__main__":
    app.run_server()
15

Hi, @jcuypers
I ran your example in my env, it didn’t work.
It didn’t show anything.

16

Can you try this:

import dash
import dash_bootstrap_components as dbc
from dash import Input, Output, State

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    [
        dbc.Button("Open modal", id="open", n_clicks=0),
        dbc.Modal(
            [
                dbc.ModalHeader(dbc.ModalTitle("Header")),
                dbc.ModalBody("This is the content of the modal"),
                dbc.ModalFooter(
                    dbc.Button(
                        "Close", id="close", className="ms-auto", n_clicks=0
                    )
                ),
            ],
            id="modal",
            is_open=False,
        ),
    ]
)


@app.callback(
    Output("modal", "is_open"),
    [Input("open", "n_clicks"), Input("close", "n_clicks")],
    [State("modal", "is_open")],
)
def toggle_modal(n1, n2, is_open):
    if n1 or n2:
        return not is_open
    return is_open

if __name__ == "__main__":
    app.run_server()
17

It still doesn’t work, Jinnyzor. The button Open modal showed but when I clicked, it didn’t show anything.

18

What other system info are you using?

What’s your os and python version?

What about flask, whats the version for that?

19

Python 3.9.8

Flask 2.2.5. When I installed the latest version of Flask, I got an error: dash 2.10.2 requires Flask<2.3.0,>=1.0.4, but you have flask 2.3.0 which is incompatible.

I am using Windows 10 pro, version 22H2, os build 19045.3086

20

Drop flask AND werkzeug to 2.2.5 and try it all again