Using dash bootstrap components with an external bootstrap template and custom components

I am trying to use dash with this popular bootstrap template - Footer - UI elements | Sneat - Bootstrap 5 HTML Admin Template - Pro

This template comes with some custom components (e.g. footer, menu) that dash doesn’t seem to immediately recognize. Is there anyway to use these components with dash?

Hi there,

From what I’m seeing when I follow the link is some template layouts html code, with some css modifications and some JavaScript.

If you’re asking if you can just copy paste that code into dash inside your .py/.ipynb file no you probably can’t. Unless someone has a hacky solution, which someone may have.

Now if you’re asking if you can make those same things with dash yes you can. From what I can see it’s a few basic things

For the html you can use html.Div() and can achieve all the html/bootstrap formatting in Python.

For the css styling all that works with dash as well just setup an assets folder inside your project folder then create a styles.css file and copy paste some css or learn some basics (all this template has is some basic stuff)

For the javascrop stuff you have:

Dropdown menu buttons use dbc.menu()

For the logout (or any button really) use dbc.button() - the highlighting on hover is the basic css just add a className to the dbc.button and then create the style of said class in the css and then add the .hover style to change the color on hover.

Then lastly there’s the checklist use dcc.checklist() - note this one is dcc (dash core components) while the other two were dbc (dash bootstrap components)

Then in the “pro” template it looks like there’s just some more html and css styling with the added social media buttons which you can do the same using html.Img() and inside that you would setup the asset to the social media picture you want to use (probably inside the assets folder) and then you’ll include src=https//www.linktosocialsmedia.com/mypage

Long story short you can make that with dash by you probably can’t just directly copy paste it. Hope the examples help you start off.

Thanks
Payton

1 Like