Dash Bootstrap Components responsive template

Dash Python
1

Hi, if this may be useful to anyone I’ve put together a responsive site template using DBC - it has boilerplate code for a multi-page app with sidebars, and a pop-up on smaller screens etc.

It’s a bit better looking that the Mantine Components template I did a week or two back, and includes support for pages to customise the sidebars.

On Github at GitHub - dh3968mlq/dash-bootstrap-responsive-template

Deployed on Heroku at https://dash-bootstrap-template-c3f1e794ed42.herokuapp.com/

(I appreciate this is in a similar area to Show and Tell - Slapdash: Boilerplate for bootstrapping scalable multi-page Dash apps. I don’t think it has much overlap with dash-bootstrap-templates · PyPI)

3 Likes
2

Hi @davidharris

This looks great! Thanks for sharing :slight_smile:

Have you considered making a version that includes the light/dark color modes? It’s new as of Bootstrap 5.3 and supported in dbc V1.5. You can find more info here: Dash Bootstrap Theme Explorer

3

Thanks for the feedback - I’ll look at that

1 Like
4

Thank you for this helpful template, @davidharris.
We often get questions about layout and position of components on the page. This template will make it a lot easier to do that :pray:

5

Thanks for the positive feedback :slightly_smiling_face:

I’ve added a button on the header to switch between light and dark themes. Very neat feature - thanks for pointing it out.

At the same URL: https://dash-bootstrap-template-c3f1e794ed42.herokuapp.com/

1 Like
6

Thanks for adding the dark/light switch, @davidharris .

I just shared your template with the Plotly Dash Linkedin User Group.

Once you’re a member, you will be able to see the post.

7

Hi @davidharris

The light/dark mode looks great!

Note that if you include the Bootstrap and/or Font Awseome icons as an external stylesheet, (or in the assets folder if you want to access them off-line) then all those icons will be available to anyone using your template. There is no need to add images to a static folder for each icon.

Here’s an example of how to include them so you don’t need to swap between separate light dark icons when the theme changes:


from dash import Dash, html, dcc, Input, Output, clientside_callback

import dash_bootstrap_components as dbc

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

color_mode_switch = html.I(
    className="bi bi-brightness-high fs-1 me-3",
    id="core-lightswitch",
    title="Switch light/dark theme",
)

github_icon = dcc.Link(
    html.I(className="bi bi-github fs-1", id="color-mode-switch"),
    href="https://github.com/dh3968mlq/dash-bootstrap-responsive-template",
    target="_blank",
)


app.layout = dbc.Container([html.Span([color_mode_switch, github_icon])])


clientside_callback(
    """ 
    function(nclicks) {
       document.documentElement.setAttribute('data-bs-theme', (nclicks % 2) ? 'dark' : 'light');
       return window.dash_clientside.no_update
    }
    """,
    Output("core-lightswitch", "n_clicks"),
    Input("core-lightswitch", "n_clicks"),
    prevent_initial_call=True,
)


if __name__ == "__main__":
    app.run_server(debug=True)
1 Like
8

Very cool template, thanks for sharing!

1 Like
9

Thanks for the suggestions - I’ve made those changes now.

1 Like
10

Thanks - I didn’t know that group was there. I’ve put in a join request.

1 Like
11

Thanks @davidharris . I just approved your request.

12

I should add - thanks again for the time you’ve put into this. I’d not realised there were icons built into DBC, and actually also didn’t know how to do a no_update from a clientside callback.

Any further suggestions for improvement will be very welcome.