Any sample or guideline to use Bootstrap 4 with Dash?

Dash Python
1

Hi,

I’m trying to use Dash to build internal dashboard, is there any formal example or guide to use Bootstrap 4 with Dash I can look into?

Thanks in advance!

Jian

2

A friend of mine and I build a front end with Boostrap , HTML and CSS, in a flask frame work and integrated the plotly graphs instead of dash and it worked out pretty well.

@s1kor this permits far more usability and flexibility.

Hope it helped.

1 Like
3

but it will require to have basic knowledge about HTML and CSS and bootstrap… so it’s more complex to gather all the information.
Dash has everything you need to do it I guess…

4

Hi SantoshiT,

Thanks for your reply!

I already wrote two internal Flask Dashboard Apps with React, D3 and Bootstrap 4 as front-end and Flask RESTful API using flask-restplus as back-end, I’m looking into whether Dash has built-in support for React + Bootstrap 4, so I can focus more on application logic then do plumbing:-).

Jian

1 Like
5

I’m really interested in trying this out as well. Could it be possible to just import the Bootstrap CSS and JS files into the project? Or does it only work with CSS? As in:

self._app = dash.Dash(__name__, static_folder='css')
self._app.scripts.config.serve_locally = True
self._app.css.config.serve_locally = True

html.Link(
   rel='stylesheet',
   href='link to bootstrap css'
)
# and something similar to
html.Script(
   ...
)
1 Like
6

Till now, I’m mainly using the Bootstrap CSS part, you can simply import bootstrap css by putting the css files under your app/assets directory.

7

Does the CSS alone suffice to get different breakpoints depending on window size?

8

Yes, you can use all the bootstrap 4 layout features including flexbox

1 Like
9

Also might be relevant:

https://dash.plot.ly/external-resources

No clue if you saw that already, because I sure wasn’t up to date on that.

10

Have you perhaps used the dcc,Tabs component and made it work with Bootstrap?

11

I did not use Tabs, I’m using standard bootstrap navbar and nav-item with dcc.Graph

12

@jianwu - Can you share your code? I’m trying to use bootstrap4 within dash but am unsuccessful.

13

Check out Dash Bootstrap Components, we’ve been using it and it is now part of the SlapDash template too