Introduction to Dash Bootstrap - Styling your App

[@CharmingData]

Hi everyone, good luck with your learning. Don't forget to download the supporting documents here: drive.google.com/file/d/1Mmbw915FOL_oZ08b1ayEpHDHFnmnx8SM/view?usp=sharing 👉If you benefitted from these tutorials & would like to show your appreciation & support the existence of more tutorials: www.patreon.com/charmingdata Thank you 💙

[@abelgebreegziabher6096]

You are just my hero. The whole week i was thinking of you doing a bootstrap tutorial. It is like you read my mind. I did not even follow the tutorial yet,but i am so excited to watch it after writing this comment. Thanks buddy.

[@CharmingData]

Thanks Abel. Hope you like it. Let me know if there is a certain bootstrap component you'd like to see in the next tutorial.

[@clarahildaramirezagudelo9112]

@@CharmingData Collapsible sidebar would be great! Excellent tutorials

[@leonardomolina8958]

Thanks! Another great tutrial. I have seen almost all the videos on the channel. Great job. We needed a channel dedicated to Plotly and Dash in greater depth

[@CharmingData]

Thanks Leonardo. I'd like to go into greater depth but I don't want it to be too complex, so I don't lose people. Thanks for the feedback

[@hossrass]

thank you so much

[@IamBab]

I've been watching your videos to help work on a class project. They have been a great help!

[@CharmingData]

Good luck with the class project.

[@edgardfiallos360]

Amazing tutorials !!! ... I'm glad you mentioned your book in the video, I just bought it in Amazon.

[@CharmingData]

Thank you

[@akhmadsyakhlani2314]

Sangat jelas sekali ,step by step nya memudahkan Kita yang awam dan baru belajar ini. Don't give up n keep practicing....nice quote...

[@CharmingData]

Thank you @Akhmad. Good luck.

[@akhmadsyakhlani2314]

@@CharmingData Are you willing to help if later we have trouble or don't understand this, can we send an inquiry via email?

[@CharmingData]

@@akhmadsyakhlani2314 Sure @Akgmad, You can send me a quick email to [e-mail] . If you're looking for a deeper consultation and would like to support my efforts in this channel, you can do so here: www.patreon.com/charmingdata

[@akhmadsyakhlani2314]

@@CharmingData thank you very much Sir...

[@rairye]

6:39 i like your folder naming convention, "Dash_More_Advanced_Shit", defo my style

[@allanmathews2093]

You are my hero.. I have watched all your videos of python and dash.. Million thanks for sharing

[@CharmingData]

You welcome Allan. Hope to see you build great stuff. 💪

[@CharmingData]

Good morning, Allan. I am trying to gather more supporters to create higher quality educational tutorials on Dash 👨🏽‍🏫 My goal is to reach 15 supporters, and it would be great if you were one of my first 15 😊 www.patreon.com/charmingdata If you were able to create any dashboards, I'd love to see them.

[@cristianmora5510]

Me parece genial la forma en que explicas cada uno de tus videos. Saludos desde Colombia

[@CharmingData]

Gracias Cristian. Espero que le hayan ayudado aprender mucho sobre Dash mis videos. Si llegas a crear unos dashboards con Dash, ¡no te inhibas! Comparte por favor.

[@henrytirla]

Your videos are gold working on a dash project and this is exactly what i needed. Thank you

[@CharmingData]

You're welcome Henry. Let me known if you have questions while building your apps.

[@VC-dm7jp]

Thank you so much for such an amazing tutorial. Your teaching is really simple but phenomenal at the same time.

[@asoahmadzade4305]

Thank you for your explanations

[@thuanyaguiarjunqueira986]

Thank you very much!!! All your tutorials are very good!

[@CharmingData]

Thank you @Thuany. If you would like to support my work, it would mean a lot to me 🤗 www.patreon.com/charmingdata

[@bosislerleugrsanadam5661]

I am new at Dash. But it is easy with you. Thanks a lot!

[@sanjayaelvitigala3086]

Thank you very much for the detailed walkthrough. Greatly appreciated. this was very helpful,🙌🙌

[@sivanuja8118]

Thank you so much for all your videos about dash!!

[@shaokangtong1983]

Thank you so much for always making great tutorials that make me learn such cool stuff easily. Looking forward to seeing more advanced topics coming out.

[@CharmingData]

Thank you Shaokang. I just launched my Patreon and plan to put even more advanced stuff there. I hope you can join me 😊 www.patreon.com/charmingdata

[@Adiltonlps]

You are the best. Thank you!

[@sucharitapilli]

Well explained and thanks a lot for sharing with us :)

[@chriskeo392]

This video is loaded! Excellent

[@chriskeo392]

Also he broke down .py and jupyter codes

[@CharmingData]

Thank you Chris. I hope you like the other videos and become a member if you learn a lot and would like to support my efforts.

[@renemartinez3014]

Really nice video. You make it sound so easy and clear. Great work.

[@JoeDhirk]

Thank you so much for your amazing work

[@random_birch_forest]

Great video, as always, really like your explanations!

[@CharmingData]

Thank you. I'll be publishing another tutorial on Bootstrap this weekend..I think you'll like it

[@rafapotocki5606]

very useful. thank you

[@netofis]

God Bless You! Thanks, really!

[@akhilkn225]

This channel All in one dash tutorials 👍👍

[@rodrigocarvalho1122]

awesome job!

[@halljoshr]

I know this is late but if you inspect the HTML on the webpage you can easily show the size of the HTML components by hovering over it in the inspect window. Good video tho thank you.

[@CharmingData]

Thank you Joshua

[@NachoLego17]

You're awesome! Thanks for these helpful videos!!

[@robertjonka1238]

how about setting background color?

[@robertmunoz1943]

Excelente profesor!!

[@CharmingData]

Gracias @Robert

[@bhavyaasharma9706]

How to put background image in dash?

[@ahmedoun5602]

MANY THANKS ADAM!

[@divyangpatel8803]

Thanks Adam. Is there any tutorial where we can make desktop un-scrollable dashboard?

[@CharmingData]

hi, what do you mean by unscrollable desktop dashboard? you mean a dashboard with a limited height that would fit on most screens without having to scroll?

[@divyangpatel8803]

@@CharmingData Yes.

[@CharmingData]

@@divyangpatel8803 hi, I'm not sure you need a tutorial about this. What you need to do is make sure the total height of the main Div of the layout does not surpass a certain screen size. Here are common screen sizes: www.designrush.com/agency/web-development-companies/trends/website-dimensions

[@divyangpatel8803]

@@CharmingData Will check. Thanks

[@rajatrahatgaonkar224]

Hi @CharmingData , thanks very much for the tutorial. I have one question which is that I am trying to change the font size, width and height of dash datepicker range component by passing the style parameter but nothing seems to happen. Can you please suggest something for this? Thanks Rajat

[@sofienabidi6112]

There is a margin (left and right) in the dashboard that cannot be removed. Please advise if any solution is available.

[@CharmingData]

Hi Sofien. Can you please share screenshot of what you mean? What minute in the video can I see this?

[@SolidBuildersInc]

Question? Is it necessary to learn the ins/outs of Flask with the Flask running under the hood of DASH? Your opinion is valuable.......... Thanks

[@SolidBuildersInc]

OK, I think I found the answer. We should learn Flask and embed the DASK app into the Flask app with 2 lines of code.... hackersandslackers.com/plotly-dash-with-flask/

[@diegomarshall375]

Great Video!, Could you please make a video of Dash with Mapbox?

[@CharmingData]

Ok Diego. I'll add that to my to-do list. Thanks for the suggestion.

[@alayetmanel6986]

Hey I tried to work with dash-bootstrap with dash 2 i get this error that it doesn't identify dbc what can i do is there a solution

[@CharmingData]

hi Alayet, try opening your terminal and instaliing dbc with: pip install dash-bootstrap-components

[@alayetmanel6986]

@@CharmingData it's already installed, i have a project using the previous dash it works fine but when i upgraded dash dbc doesn't function at all. I looked in the docs, stockoverflow nd all nothing worked 😢

[@CharmingData]

@@alayetmanel6986 try adding dbc.theme.bootstrap inside the app = Dash(__name__)

[@KaYKeConKa]

Thanks for the amazing video. I would like to know if there is any way to control the x and y coordinates of my app's bootstrap. Depending on the device the user views my app with, can I control the width and height of charts and tables?

[@CharmingData]

Hi Carlos, If I recall correctly, I talk about the here, on the dash bootstrap python file kzbin.info/www/bejne/ap-oinZ9qN6taJI

[@penninahgathu7956]

Thank you for this. I learned alot

[@ylliparduzi6789]

You are amazing! Thanks a lot for this video ♪♥

[@neelpaul8880]

Great work!! Your videos are helping me a lot, want to see some videos explaining @callback.

[@CharmingData]

Neel, go to my first video created. That explains the basic callback. Or go see dynamic callback video, that's a little more advanced. Good luck

[@gastonalvarez3386]

Hi! thank you for your videos, they're really helpful for learn dash!! I have a question, what if I want to divide de row in two? for example, I want to make a chart of size 6 and next to it to charts (one above from other), all in the same row. How I can do that? Thank you! cheers from Argentina!

[@CharmingData]

Hi @gaston, I think you can do something like this: dbc.Row([ dbc.Col([ dcc.Graph() ],width=6), dbc.Col([ dbc.Row([ dcc.Graph() ]), dbc.Row([ dcc.Graph() ]), ],width=6) ])

[@gastonalvarez3386]

@@CharmingData thanks!! You're the best!

[@Eggthan324]

Hey Adam. Is there a way to create a custom css sheet that can be used separate from the .py file? Basically I'm looking for a way to have a style sheet including a header and an image that I can just tack onto any dashboard I create

[@techpetla3901]

I am using firefox and for some reason, it does not show any colors when I use different themes.

[@CharmingData]

Tech, if you use Chrome does it matter? does it show color in chrome?

[@techpetla3901]

@@CharmingData Yes. It works.

[@its_me7363]

Can we use more than one stylesheet? let say one as directly from internet in externalsheet variable and other different in assets folder. Will this also contradict?

[@CharmingData]

Hi @it's_me . I think it's possible but they might contradict each other if they have code that overlap. Unless you're a CSS expert, I would use one sheet.

[@mn-um2bo]

Hi Adam, Thanks for these awesome well explained tutorials.Great job!👍 Still going through them on by one I am struggling to find the list of all possible classnames one can use within class_name parameter for bootstrap components.Is there a compiled documentation?

[@SolidBuildersInc]

OK, I hate I have to ask you this question, but do you have any recommendations for a FLASK course? I like your teaching style, but you don't appear to have a course for the structure of Flask? Please advise.......

[@CharmingData]

Hi David, I honestly don't. I plan to make a tutorial on flaks in a few weeks but that might be too late for you. I wish I knew a good tutorial on that but I don't since I haven't started looking into it. Sorry. Good luck,

[@allanmathews2093]

Can we do a datatable with call back in bootstrap theme??

[@CharmingData]

Allan, what do you mean callbakc in bootstrap theme? are you trying to use the bootstrap dataTable?

[@allanmathews2093]

@@CharmingData yep, a bootstrap datatable when user apply filters, the data in the table should also Change.. Is that possible??

[@CharmingData]

@@allanmathews2093 yes, you can. It depends what data you want to put inside the datatable. Use the Dash callback, where the input represents the data you'd like the table to have, and Output would insert the data inside the Table: dash-bootstrap-components.opensource.faculty.ai/docs/components/table/

[@blociot]

Hi Adam. Thank you for the great content. Have you tried to switch the themes by clicking on a button? I assigned the default theme url in a variable and overwrote the variable on the PB callback, but it doesn't work. Would appreciate your help or any hint

[@CharmingData]

Hi Mos, I don't think that possible. Anything outside/above the layout in Dash is loaded only once, when the app first loads. Only the components and attributes inside the layout can change with the callback. So if there is a way to define bootstrap theme inside the app.layout, you would be able to change that with a callback. One way you can change a theme with a callback is through the Div className, as suggested in this post. community.plotly.com/t/switch-the-local-css-sheets-in-the-python-code/26864

[@abhinavshah138]

Hey, is it possible to develop a dashboard using DASH for one of my web scraping codes(using Beautiful soup)?

[@CharmingData]

for sure. I'll add it to my to do list.

[@abhinavshah138]

@@CharmingData Can't wait for that one! 😍😍

[@jasppponii2030]

Hey dude, really amazing video! Just one question: I want to use the dbc.table because it is really nice to look at in comparison to the dash datatable. I would like to select a row, and based on that selection change something else in the dashboard with a callback. With dash data table pretty straightforward but i'm really struggling to find information about row selection with the bootstrap table. Do you know how to do this (or where i can information about this stuff)? Thanks in advance....

[@CharmingData]

Jasppp, that might not be possible. The Bootstrap Table is a replacement for the html.table(), so it doesn't have those features that the Dash DataTable has. Maybe you can include an id insider the html.Tr() like this: html.Tr(id="my-table", [html.Td("Arthur"), html.Td("Dent")]) Then, try to use that in the callback to graph the data inside the row. But it's a lot more complex than the Dash DataTable. I would recommend sticking to that. Good luck,

[@jasppponii2030]

@@CharmingData thanks a lot! I thought it would be possible since the 'hover' argument highlights a certain row when you hover over it (duhuhhhh). But maybe i just have to put a lot of time in styling the dash data.table. thanks for the reply!

[@shaokangtong1983]

Hi, I tried to run your code but the error pops out - AttributeError: module 'dash' has no attribute ‘Dash’. Do you know how to solve this issue? Thanks!

[@CharmingData]

Do you have any file named dash.py? What version of Dash do you have installed?

[@shaokangtong1983]

@@CharmingData ​ ​ Thanks for your response. I solve this issue by moving the code and data file to a new working directory. However, the "dbc column component" seems not work: all the “column components” in the same “row component” display in separate rows. Do you why this happens? My dash version is 1.16.2 and my dash-bootstrap-components version is 0.10.6.Thanks!

[@CharmingData]

@@shaokangtong1983 did you add a bootstrap inside your dash.Dash(...) ?

[@shaokangtong1983]

@@CharmingData It’s amazing! The layout works out perfectly.Thank you so much!

[@CharmingData]

@@shaokangtong1983 You're welcome Shaokang, and congratulations on your new dashboard. If you have any more questions, feel free to let me know. Also, if you'd like to support my efforts and creation of additional tutorials, I'd be very thankful. www.patreon.com/charmingdata Have a wonderful weekend. Adam

[@ramyadevinataraj315]

Hi sir, your videos are really nice & very helpful. i want to plot more no of plots in a single row without the condition(12 columns), bootstrap grid system has default 12 columns , but i want to plot more than 12 columns in a single row, i'm really in need of help, so please let me know if you have any idea.

[@CharmingData]

HI Ramya, Thanks for watching my tutorials. What do you mean you want to plot more columns in one row? I don't think that's possible. Here's an article on the topic: medium.com/wdstack/bootstrap-exceed-12-columns-in-a-row-b551eeddf62b#:~:text=The%20Bootstrap%20grid%20has%20only,12%20columns%20in%20a%20row. Are you trying to have more than 12 plots in one row?

[@statrace6914]

Hello, Thanks for this helpful tutorial. When running this code I am getting the following error "TypeError: cannot convert 'NoneType' object to bytes". Do you have any idea about it? Thanks in advance

[@CharmingData]

Hi @statrace. It could be many things. What line of coffee is giving you that error? Do you have any idea where the bytes is coming from? Are you using an excel sheet for data?

[@statrace6914]

@@CharmingData I see the following error on Chrome TypeError TypeError: cannot convert 'NoneType' object to bytes Traceback (most recent call last) File "/opt/anaconda3/lib/python3.7/site-packages/flask/app.py", line 2463, in __call__ return self.wsgi_app(environ, start_response) File "/opt/anaconda3/lib/python3.7/site-packages/flask/app.py", line 2449, in wsgi_app response = self.handle_exception(e) File "/opt/anaconda3/lib/python3.7/site-packages/flask/app.py", line 1866, in handle_exception reraise(exc_type, exc_value, tb) File "/opt/anaconda3/lib/python3.7/site-packages/flask/_compat.py", line 39, in reraise raise value File "/opt/anaconda3/lib/python3.7/site-packages/flask/app.py", line 2446, in wsgi_app response = self.full_dispatch_request() File "/opt/anaconda3/lib/python3.7/site-packages/flask/app.py", line 1952, in full_dispatch_request return self.finalize_request(rv) File "/opt/anaconda3/lib/python3.7/site-packages/flask/app.py", line 1969, in finalize_request response = self.process_response(response) File "/opt/anaconda3/lib/python3.7/site-packages/flask/app.py", line 2266, in process_response response = handler(response) File "/opt/anaconda3/lib/python3.7/site-packages/flask_compress.py", line 109, in after_request response.set_data(compressed_content) File "/opt/anaconda3/lib/python3.7/site-packages/werkzeug/wrappers/base_response.py", line 355, in set_data value = bytes(value) TypeError: cannot convert 'NoneType' object to bytes The debugger caught an exception in your WSGI application. You can now look at the traceback which led to the error. To switch between the interactive traceback and the plaintext one, you can click on the "Traceback" headline. From the text traceback you can also create a paste of it. For code execution mouse-over the frame you want to debug and click on the console icon on the right side. You can execute arbitrary Python code in the stack frames and there are some extra helpers available for introspection: dump() shows all variables in the frame dump(obj) dumps all that's known about the object Brought to you by DON'T PANIC, your friendly Werkzeug powered traceback interpreter.

[@statrace6914]

I am just using the data you provided in csv format

[@CharmingData]

@@statrace6914 does it say what line of code the error is on?

[@statrace6914]

@@CharmingData I see the following at the end of the error: File "/opt/anaconda3/lib/python3.7/site-packages/werkzeug/wrappers/base_response.py", line 355, in set_data value = bytes(value) TypeError: cannot convert 'NoneType' object to bytes 127.0.0.1 - - [28/Oct/2020 10:11:49] "GET /favicon.ico HTTP/1.1" 500 -

[@agatarubacka4671]

Thank you!

[@benjamindkluong]

Could you make tutorials on multiple pages in Dash?

[@CharmingData]

I'll try 😊. I just need more time

[@Dholi1]

Checkout the official Dash plotly website. They have lots of tutorials including one on multiple pages in Dash.

[@CharmingData]

Posting a multi-page app tutorial tomorrow

[@benjamindkluong]

@@CharmingData Thank you so much. Im looking forward to it.

[@vrumivruni]

Yo I love the video so far but... Dash_More_Advanced_Shit in your folders got me rolling!!

[@CharmingData]

Thanks Thomas

[@GordonShamway1984]

This is so perfect. Do you have a patreon page?

[@CharmingData]

Thank you for your encouragement, Stefan. I'll be setting it up soon. I'll let you know

[@CharmingData]

Hi Stefan, I just created my Patreon page. I hope you can join me 👍 www.patreon.com/charmingdata

[@GordonShamway1984]

@@CharmingData done ;-)

[@CharmingData]

@@GordonShamway1984 thank you🤗

[@giovannineri9264]

nice video gg

[@semidevilz]

awesome vid! love the filepath....dash_more_advanced....S.....lol

[@CharmingData]

Thanks 👍

[@greg4828]

/kiss

[@greg4828]

Really appreciate your videos! Thank you for all the awesome tutorials! My team and I were able to create a beautiful dashboard thanks to your wealth of knowledge and your willingness to share it! Thanks again!!! Looking forward to watching more of your content!

[@ironcladruffian1490]

Dash_More_Advanced_Shit