bootstrap integration with dash

[bainadeashish]

Below is my css,jquery & min.js code
`
my_css_url = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
app.css.append_css({
"external_url": my_css_url
})
my_jquery = "https://code.jquery.com/jquery-3.1.0.js"
app.scripts.append_script({
"external_url": my_jquery
})

my_js_url = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
app.scripts.append_script({
"external_url": my_js_url
})
`

I am able to get css & jquery of the bootstrap but getting below errors.

plotly-1.31.0.min.js:13 Error: attribute height: A negative value is not valid. ("-14") in browser developer tools.

What should i do in order to get rid of these errors.

[ned2]

I don't know if this is related to your error, but it is likely relevant: Dash uses React on the client side which is not going to play well with jQuery out of the box. I've seen some articles describing strategies for incorporating them both, but I think it would require modifications of Dash components.

Using pure CSS Bootstrap components on the other hand is fine. I've build a number of Dash apps using the Bootstrap layout framework and I think this is a great combination.

[bainadeashish]

It was question not a issue hence closing.

[bacalfa]

It's not working for me. What am I missing in the following example?

import dash
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(children=
    [
        html.Div(children="First Div", style={"class": "col-md-6"}),
        html.Div(children="Second Div", style={"class": "col-md-6"})
    ],
    style={"class": "row"}
)

external_css = ["https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
                "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css", ]

for css in external_css:
    app.css.append_css({"external_url": css})

external_js = ["http://code.jquery.com/jquery-3.3.1.min.js",
               "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"]

for js in external_js:
    app.scripts.append_script({"external_url": js})


if __name__ == "__main__":
    app.run_server(debug=False)

Result:

[ned2]

html.Div(children="First Div", style={"class": "col-md-6"})

should be

html.Div(children="First Div", className="col-md-6")

As I mentioned in the above comment, mixing Bootstrap JavaScript (which uses jQuery) is probably not a good idea as it will conflict with React, which Dash uses. If you're just using the Boostrap's CSS, then remove the JS file, it's not necessary.

Also these sorts of questions are best asked over on the Dash community forum 😄

[LichpinOwl]

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import plotly as py

external_css = ['https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css']

external_js = ['https://code.jquery.com/jquery-3.3.1.slim.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js',
'https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js'
]

app = dash.Dash(name)

for css in external_css:
app.css.append_css({"external_url": css})
for js in external_js:
app.scripts.append_script({"external_url": js})
app.layout = html.Div([
html.Div([
html.H1(['Hello world !'], className=['col-4', 'd-flex', 'justify-content-center' , 'bg-secondary']),
html.Div(['btn'], className=['btn', 'btn-danger'])
],
className=['row'])
],
className=['container'])

if name == 'main':
app.run_server(debug = True)

---

---

Running on http://127.0.0.1:8050/
Debugger PIN: 296-361-685
c:\Python27\lib\site-packages\dash\resources.py:45: UserWarning:

A local version of https://code.jquery.com/jquery-3.3.1.slim.min.js is not available

c:\Python27\lib\site-packages\dash\resources.py:45: UserWarning:

A local version of https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js is not available

c:\Python27\lib\site-packages\dash\resources.py:45: UserWarning:

A local version of https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js is not available

Running on http://127.0.0.1:8050/
Debugger PIN: 041-543-092

[ned2]

@XaosFortuna, you're using an old approach for adding custom CSS/JS which doesn't support running locally. Instead use the new approach of creating an assets folder in the same directory as your Dash script and contains your CSS/JS files (and make sure you have the latest version of Dash installed). See this section of the Dash user guide: https://dash.plot.ly/external-resources