Complete Guide to Bootstrap Dashboard Apps - Dash Plotly

Learn to use Dash Bootstrap to fully design and style a dashboard app in python that follows stock prices. We will cover the grid of the page, fonts, colors, rows, and columns so you can feel comfortable designing your future app in any way you want. Download code below.

View my book - The Book of Dash:

Code:

Bootstrap themes and Cheatsheet:

Dash Bootstrap documentation:

Video Layout:
00:00 - What you will learn and Python code file
01:45 - data and libraries
10:13 - Bootstrap Themes
13:15 - Layout Grid and Styling
45:45 - Adding the Callback
48:08 - Bootstrap Card, Image
50:56 - Adjusting Layout to different screen sizes and mobile
58:48 - Support (learn to add table & draw on graphs)

************************************************************************
👉 Your support keeps Charming Data running, which is proudly a 100% member-supported educational channel:

[viktor]

I don't know how many times I have watched your videos over and over, 1M? Thank you for posting every single one of them!

[sohrabsalehin]

Thank you very much Adam, I really needed this tutorial.

[mihaicarnuta]

Thank you very much Adam! Your knowledge and teaching skills are top-notch.

[lbbrfarangkiinok]

tfw when you fail at copying a phrase so small you could have just typed it out 5 times by the time you actually get it pasted correctly from your clipboard! XD

Thanks a lot for the video, learned a lot. I kind of hate dealing with all these whistles and bells on the frontend, but at least bootstrap makes it somewhat tolerable.

[mauroSfigueira]

I always learn a lot from your videos. Thank you very much!!

[cihangiraydoner]

Thank you very much for your video. I have really enjoyed and learned a lot of things during your presentation.

[wiznikhil]

Thank you for this video guide! It showed me how to control layout of components, something I was facing difficulties with. Btw, I also read your book The Book of Dash, it's a great book! 🙂

[venkat]

please do more such live streams rather recording videos explaining the code doing live stream with code writing is lot of learn together thanks

[irmdev]

this video is an early Christmas present.

[daianeklein]

Great! Thanks for sharing. Greetings from Brazil 🇧🇷

[wvxiw]

Thanks! Exactly what is needed
Can you do a tutorial on dash leaflet?

[mohdzaki]

Thank you for the great effort
could you please give a hint or tutorial on how to deploy this app on MS-IIS or Apache

[cssensei]

can you do streamlit, I had issues managing state/cache in it so reverted back to plotly— now looking at your “advanced shit” section to get a hang of dash callbacks

[deepashalini]

Thanks a lot for this!! Super helpful!

[shailajaj]

Great Video! Could you also make one for dropdown update menu types - restyle etc Thank you

[chriskeo]

It's 3 am and I'm on still on this tutorial 😂

[Sans-spv]

Hey Adam, Thanks for your tutorial, however when i m trying the dcc.checklist the options are loading in vertical fashion how can i make them in horizontal manner?

[ysiegel]

Hello, great tutorial Séverine, thanks! I have one question: I have a header row with nav bar and a footer row and I want the graph (or any other component) to be centered vertically (even when changing window size) in my content row, how should I do this? Really struggling to find the information… thanks!

[starorange]

Hi Adam, other than bootstrap, is there any other UI libraries easily installable (like bootstrap)? Material UI or any others?

[kazakturku]

at 45:40 inside checlkist you used 'mr-3' in labelClassName attribute I tried using it but it didnt work do you have any suggestions how I can put space between checklist items properly. And thank you for this video. I'm new to these kind of things and it helps a lot!!