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:
www.amazon.com/Python-Dash-An...
github.com/DashBookProject/Pl...
Code:
github.com/Coding-with-Adam/D...
Bootstrap themes and Cheatsheet:
www.bootstrapcdn.com/bootswatch/
hackerthemes.com/bootstrap-ch...
Dash Bootstrap documentation:
dash-bootstrap-components.ope...
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:
Patreon: / charmingdata
GitHub: github.com/sponsors/Coding-wi...
KZread: / @charmingdata

Пікірлер: 102

  • @CharmingData
    @CharmingData3 жыл бұрын

    Hi All, Join the Charming Data Community -- charming-data.com/ -- to learn more data viz, data apps, and AI integrations.

  • @ottomaximus19

    @ottomaximus19

    2 жыл бұрын

    Instablaster

  • @florianboudon4624

    @florianboudon4624

    2 жыл бұрын

    Hi, I've used dash with spider, my web navigator is chrome. And when I tried to launch a simply prog my local host is bloqued, I need help. thank you

  • @CharmingData

    @CharmingData

    2 жыл бұрын

    @@florianboudon4624 try debug=False at the very end. Also, it could be that you have a string firewall on your computer, blogging the execution of these kind of programs

  • @florianboudon4624

    @florianboudon4624

    2 жыл бұрын

    @@CharmingData Thank you for your answer, you're right, I've just written False and it's working :)

  • @mihaicarnuta
    @mihaicarnuta2 жыл бұрын

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

  • @viktor4207
    @viktor42072 жыл бұрын

    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!

  • @CharmingData

    @CharmingData

    2 жыл бұрын

    Thank you Viktor.

  • @sohrabsalehin6713
    @sohrabsalehin67137 ай бұрын

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

  • @cihangiraydoner7962
    @cihangiraydoner79622 жыл бұрын

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

  • @deepashalini3344
    @deepashalini33443 жыл бұрын

    Thanks a lot for this!! Super helpful!

  • @mauroSfigueira
    @mauroSfigueira Жыл бұрын

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

  • @pythonprogrammer2186
    @pythonprogrammer21863 жыл бұрын

    Well done! Very helpful.

  • @wiznikhil
    @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! 🙂

  • @CharmingData

    @CharmingData

    Жыл бұрын

    Thank you 🙏

  • @daianeklein9633
    @daianeklein96332 жыл бұрын

    Great! Thanks for sharing. Greetings from Brazil 🇧🇷

  • @franck-eloi646
    @franck-eloi6462 жыл бұрын

    Thank you very much...I learned a lot

  • @gabrielb_11
    @gabrielb_112 жыл бұрын

    Fantastic!!! thanks

  • @jeremysong4360
    @jeremysong43603 жыл бұрын

    Thank you!

  • @ysiegel5544
    @ysiegel55442 жыл бұрын

    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!

  • @danielgranjaconejeros6355
    @danielgranjaconejeros63559 ай бұрын

    Thanks a lot!

  • @mohdzaki01
    @mohdzaki013 жыл бұрын

    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

  • @maniac123ful
    @maniac123ful3 жыл бұрын

    amen for this

  • @wvxiw1098
    @wvxiw10983 жыл бұрын

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

  • @CharmingData

    @CharmingData

    3 жыл бұрын

    I can't promise. But I'll try. I have many requests for tutorials. Thanks for the suggestion.

  • @venkat2132
    @venkat2132 Жыл бұрын

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

  • @lbb2rfarangkiinok
    @lbb2rfarangkiinok2 жыл бұрын

    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.

  • @shailajaj9671
    @shailajaj96712 жыл бұрын

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

  • @xXraiva33Xx
    @xXraiva33Xx3 жыл бұрын

    Great video ! Could you explain how to use Dash Sidebars to implement a multipage app? Would be very useful. Keep it up!

  • @CharmingData

    @CharmingData

    3 жыл бұрын

    Hi @xX... where have you seen the Dash Sidebars?

  • @avisankhadutta4053
    @avisankhadutta40533 жыл бұрын

    Hey, just two questions. 1. For popover body, how to connect the hover one with button? 2. Is there any circular 'i' icon available to pop information in dbc/dcc/html components instead of a hefty button?

  • @felipesimoes8
    @felipesimoes8 Жыл бұрын

    Omg best tutorial ever

  • @CharmingData

    @CharmingData

    Жыл бұрын

    Thank you Felipe.

  • @ahsergh
    @ahsergh3 жыл бұрын

    Thanks

  • @rodrigocorrea6348
    @rodrigocorrea63483 жыл бұрын

    This awesome! I have a question about a specific feature of multiplots. In case I wanna create a figure with 2 subplots (row=1, col=2) and want have the share x axis option so that when I zoom in one of the graphs the second one is also zoomed, how can it be done? I know that if the subplots are of (row=2, col=1) it works fine. But I cannot find a way to have it working for (row=1, col=2). Thank you very much!

  • @CharmingData

    @CharmingData

    3 жыл бұрын

    Hi Rodrigo, Probably the best solution is to use Plotly Express high level interface parameters: facet_col and/or facet_row. Here's the documentation for the line graph.

  • @kejor8617
    @kejor86173 жыл бұрын

    Bro! Good job, but to be honest I dont know that should I learn React or learn this xd

  • @user-nj2yh5kd4d
    @user-nj2yh5kd4d10 ай бұрын

    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?

  • @FallinPython
    @FallinPython3 жыл бұрын

    Hi Adam, thank you for this comprehensive tutorial! Regarding this bootstrap layout using rows and columns, how one can control the space between two rows? Is there any class or parameter we can use to control it? Thank you very much!

  • @CharmingData

    @CharmingData

    3 жыл бұрын

    Look at the bootstrap class i use for the title of the page. I think it's mp-3 or something similar. That creates a padding under the elements inside the rows.

  • @langstrumpf156

    @langstrumpf156

    3 жыл бұрын

    You can also insert a custom style parameter: style={'padding': 50}

  • @CharmingData

    @CharmingData

    3 жыл бұрын

    @@langstrumpf156 Good point.

  • @vikranttyagi5232

    @vikranttyagi5232

    2 жыл бұрын

    You can also add an html.Br() between the two rows to provide the spacing.

  • @irmdev595
    @irmdev5952 жыл бұрын

    this video is an early Christmas present.

  • @CharmingData

    @CharmingData

    2 жыл бұрын

    Thank you irm

  • @LifeWithSeb99
    @LifeWithSeb993 жыл бұрын

    could you do the same using external css in assets folder?

  • @cssensei610
    @cssensei6103 жыл бұрын

    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

  • @CharmingData

    @CharmingData

    3 жыл бұрын

    Hi @CS Sensei. Thanks for watching my channel

  • @wexwexexort
    @wexwexexort3 жыл бұрын

    Hey Adam, not related to dbc but I've a question. Do you know if it's possible configure "number digits to display" globally for the dashboard? We shouldn't have to be round every float via python.

  • @CharmingData

    @CharmingData

    3 жыл бұрын

    I'm sorry, Mert. I'm not sure how to do that globally.

  • @moblear7822

    @moblear7822

    3 жыл бұрын

    Create a separate .py file. Use it to define global variables. import that file in each .py file. Define a variable that it the numeber of decimal points and use that variable each time you make a table in a dashboard. If you need to change the digits just change that variables value

  • @starorange8449
    @starorange8449 Жыл бұрын

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

  • @CharmingData

    @CharmingData

    Жыл бұрын

    hi there, I would recommend you check out Dash Mantine Components. People really like that one as well.

  • @michaeldeandrade2911
    @michaeldeandrade2911 Жыл бұрын

    Valeu!

  • @chriskeo392
    @chriskeo3923 жыл бұрын

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

  • @CharmingData

    @CharmingData

    3 жыл бұрын

    Get some sleep, Chris or you'll regret it the next day 😊

  • @huzefadatasci8411

    @huzefadatasci8411

    Жыл бұрын

    @@CharmingData you shared your experience 😀

  • @cultg0ds73
    @cultg0ds733 жыл бұрын

    thx a lot,but i got a question about layout. i do exactly the same as you, but in first row and first colomn, the graph and the dropdown are stick together, there is no blank between them. plz help!!!

  • @CharmingData

    @CharmingData

    3 жыл бұрын

    Hi, i'm not sure why that's happennig

  • @philipniedzwiadek8736
    @philipniedzwiadek87362 жыл бұрын

    Which video is it on your patreon that shows how to draw on plotly graphs?

  • @CharmingData

    @CharmingData

    2 жыл бұрын

    Hi Philip, I can't remember if I have a video on that in patreon, but I basically talk about this: dash.plotly.com/annotations They have good examples of how to draw on graphs in that link. Let me know if you have any questions

  • @philipniedzwiadek8736

    @philipniedzwiadek8736

    2 жыл бұрын

    @@CharmingData Amazing! You’re the bomb Adam!

  • @kazakturku5885
    @kazakturku5885 Жыл бұрын

    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!!

  • @kazakturku5885

    @kazakturku5885

    Жыл бұрын

    I found a solution. I replaced labelClassName area with labelStyle={'margin-left': '10px'}. This method solved my problem.

  • @CharmingData

    @CharmingData

    Жыл бұрын

    @@kazakturku5885 Thank you for sharing the solution, Kezak.

  • @AGA610
    @AGA6103 жыл бұрын

    A video on global updates?

  • @booshuyi4388
    @booshuyi43882 жыл бұрын

    Hi, I'm using Spyder to run the script, but the bootstrap design like the text color is not working in the webpage. May I know is it additional package needed to download?

  • @CharmingData

    @CharmingData

    2 жыл бұрын

    Hi Boo Shu. I haven't tried Spyder but did you remember to add bootstrap theme as an external stylesheet where you instantiate dash

  • @huseyinyilmaz1155
    @huseyinyilmaz11553 жыл бұрын

    Hi Adam, How can we fit the whole contents into a single webpage, and secondly how can give different background colors to different parts of the layout. let's say I have two rows and two columns and I want to give background colors for row one col1, row1 col2, and so on. so it will look like green tiles with spaces between them on a blue ground (web page background). Thank you

  • @CharmingData

    @CharmingData

    3 жыл бұрын

    one easy way to do put your content and graphs on dbc.cards and manage the background colors of each card. You can also mange the color of your figures like this: fig.update_layout( plot_bgcolor='black', paper_bgcolor='black', )

  • @huseyinyilmaz1155

    @huseyinyilmaz1155

    3 жыл бұрын

    @@CharmingData Thank you, I will try

  • @huseyinyilmaz1155

    @huseyinyilmaz1155

    3 жыл бұрын

    @@CharmingData Hi Adam, I used Cards as you suggested. in Cards, is it possible two use two different components next to each other, horizontally? For example, a text at left and a "dropdown" list just next to this text, and maybe another component next to those. So, I have three different components on the same card, so same background color, without any border between them. Whenever I tried, components comes one under the other one.

  • @CharmingData

    @CharmingData

    3 жыл бұрын

    @@huseyinyilmaz1155 I've never tried this. But try to put dbc.Row and dbc.Col inside the body of dbc.Card, like in the example below: stackoverflow.com/questions/63592900/plotly-dash-how-to-design-the-layout-using-dash-bootstrap-components

  • @blpraveen1436
    @blpraveen1436 Жыл бұрын

    I get error 'PosixPath' object has no attribute 'expanduser' when I run the server

  • @MahadiHasan-qi1cb
    @MahadiHasan-qi1cb Жыл бұрын

    dbc.col() and dbc.row() what is the difference between them? given their similarity seems like interchangeable!.. what is the unique differences between them. more specifically when to use either of them while coding?

  • @CharmingData

    @CharmingData

    Жыл бұрын

    hi Mahadi, first you declare the dbc.Row() and then, inside the Row, you have to declare the dbc.Col(). Then inside the Col is where you put your Dash components. I hope that helps.

  • @braindjitornu3144
    @braindjitornu31442 жыл бұрын

    anyone know where the link to the git repo is?

  • @Me-ur2zt
    @Me-ur2zt3 жыл бұрын

    When I run your code, I get the following error: IncorrectTypeException: The input argument `my-dpdn.value` must be a list or tuple of `dash.dependencies.Input`s. Please help.

  • @CharmingData

    @CharmingData

    3 жыл бұрын

    Can you please check your dash version. Is it over 1.14.0?

  • @Me-ur2zt

    @Me-ur2zt

    3 жыл бұрын

    @@CharmingData It is: 1.14.0 Looks like I have to put brackets around the Input: @app.callback( Output('line-fig2', 'figure'), [Input('my-dpdn2', 'value')] )

  • @CharmingData

    @CharmingData

    3 жыл бұрын

    @@Me-ur2zt yes, for the early versions of Dash, multiple Inputs and Outputs needed to be inside lists, but for the later version you don't need a list.

  • @pujanbade
    @pujanbade2 жыл бұрын

    Sir, can you tell me how can i make reset button work to reset dropdown values to default states

  • @CharmingData

    @CharmingData

    2 жыл бұрын

    hi @justpjn you need to put the button n_clicks as an INput in the callback, and put the dropdown value as an Output in the callback. In the callback function write the code so the value returned is the original default state.

  • @wiztech2732
    @wiztech27324 ай бұрын

    The checkboxes with symbols appear vertically on my computer. Does this mean that the Dash is unstable? Or any solution to work aruond?

  • @CharmingData

    @CharmingData

    4 ай бұрын

    Not at all. Check the dash bootstrap version. Also, can you please share the checkbox code with me?

  • @vanditdostonkadost
    @vanditdostonkadost2 жыл бұрын

    Hey mate, how do I add client side callback on multiple graphs here. Looking for real support here ty

  • @chriskeo392

    @chriskeo392

    2 жыл бұрын

    Join his subscription. $10 per month at least

  • @QubitBrain
    @QubitBrain2 жыл бұрын

    no_gutter is not working it is not present in the new version of bootstrap. What should I do in place of it?

  • @CharmingData

    @CharmingData

    2 жыл бұрын

    Hi Mohammad. Try to assign fluid=True or fluid=False to the dbc.Container()

  • @ketteralfred6069
    @ketteralfred60692 жыл бұрын

    i get this error how would you assist me? TypeError: The `dash_bootstrap_components.Row` component (version 1.0.3) received an unexpected keyword argument: `width` Allowed arguments: align, children, className, class_name, id, justify, key, loading_state, style

  • @CharmingData

    @CharmingData

    2 жыл бұрын

    Hi @ketter. Width can only be used with DBC.col()

  • @ShilpiBhargavaiitb
    @ShilpiBhargavaiitb Жыл бұрын

    I've done exact same thing but getting the two dropdowns are not coming in two different col's thery are coming in same row

  • @CharmingData

    @CharmingData

    Жыл бұрын

    Hi @shilpi. Can you please share your code/question on community.plotly.com Forum? That will allow us to see your code and try to help you out. Thank you,

  • @dharmeshparihar8484
    @dharmeshparihar84842 жыл бұрын

    Hi Pal, I want boiler code for Dash Plotly + React Component. Have tried installing pip install cookiecutter all the way possible. Kindly help

  • @CharmingData

    @CharmingData

    2 жыл бұрын

    Hi. I don't have that unfortunately

  • @horaciosanchez4982
    @horaciosanchez4982 Жыл бұрын

    thanks for the video, but the second callback give me an error "Callback error updating line_fig2.figure". i hope you can help me. thanks

  • @torsten156NRW
    @torsten156NRW2 жыл бұрын

    Hi, I use the Card-Visual in my App. The Card shows a Value (e.g. 140). It's possible to change this Value with an @app.callback? Thank's...