Can't apply dbc.themes.BOOTSTRAP

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()

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?

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.

Hello @impossibleno1,

What versions of these are you running?

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

Hmmm.

Maybe try reinstalling them?

Also, try updating to 2.9.2 or I think 3?

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

Still the same error of dom.js not found?

What do you have in your assets folder? Anything?

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).

Try updating dbc to 1.5+

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

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

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.

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()

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

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()

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

What other system info are you using?

What’s your os and python version?

What about flask, whats the version for that?

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

Drop flask AND werkzeug to 2.2.5 and try it all again