Bootstrap with Cards - Dash Plotly

[@CharmingData]

Hi Everyone, Dash Bootstrap Card Component is very powerful and can lead to very professional layouts. Enjoy! 👉If you benefitted from these tutorials & would like to show your appreciation & support the existence of more tutorials: www.patreon.com/charmingdata Thank you 💛

[@adityanjsg99]

Sir, I am so glad I stumbled upon your channel. My value to the organization has shot up with your videos. Thank you!

[@mixedmusicarts9917]

your channel is just gold

[@mdaplaton]

Thx for your content again. Love the content and the naming of your videos simple and direct avoiding clickbaits .

[@akkifourteen14]

oh my god, that was brilliant and detailed! thanks a lot, really appreciate it!

[@PAULPAULPAUL214]

Very high-quality material, thank you very much.

[@abelgebreegziabher6096]

High quality as usual.

[@random_birch_forest]

Great video, Adam! Really like your explanations! In the future videos I would appreciate more information on complex callbacks, where several input variables influence several graphs and tables in the dashboard simultaneously. Cheers!

[@CharmingData]

Hi Alex, thank you for the suggestion, and I'm glad my tutorials are useful to you. Making these videos takes a lot of time, which is why I haven't done a video with complex callbacks yet. But I'll definitely consider it. It would be great to have you as my supporter so I can continue creating Dash Plotly educational tutorials. www.patreon.com/charmingdata My next video will be on Dash Alerts, Modals, popovers, and Fades. I hope you like it :)

[@penninahgathu7956]

Thank you. Learnt so much from you.

[@fgreve]

As usual, excelent material. Thanks!

[@SolidBuildersInc]

Thank You, TimeStamp 20:50 What did you do to correct the rendering of the Chart? I rewind 7 times and have no idea how you new it should work, lol

[@CharmingData]

Hi Davis, It's a secret :) No, I actually don't think I did anything. PyCharm really slows down on my computer when I'm recording a video. So, I just gave it more time to load and stopped trying to refresh the page

[@SolidBuildersInc]

@@CharmingData "It's a Secret" lol I had to take a break after that, lol Thanks

[@cechgyt8336]

Thank you for the video ! Is it possible to drag card only by clicking on the cardheader not the cardbody ?

[@CharmingData]

What do you mean? I don't recall being able to drag the cards on this video. Could you drag them?

[@cechgyt8336]

@@CharmingData Thank you for you answer, I have used the wrong word maybe. In this video we have learnt how the user can move cards around. My idea was to move cards around only when the user click on the card header. Because in my cardbody I have a slider so when I move my slider it moves my card. The solution for me would be to allow the user to move the card only by pressing the cardheader (instead of the all card). I don't know if it's possible

[@CharmingData]

@@cechgyt8336 You can move the card around by changing their position inside the app.layout. This video doesn't show how to move the card around with user interaction.

[@bholaprasad26]

Is it possible to only change the background color of the card header but not the whole card?

[@talk2praju]

very good explanation 👍👍👌👌

[@CharmingData]

Thank you Prajwal. I'm glad you like it. Make sure to turn on your notification for this channel if you subscribed, so you can be notified of my next video on bootstrap 😎

[@stefanherbek2025]

Great video. Thanks a lot! Isn't a dbc.container always needed?

[@CharmingData]

It is always recommended to have dbc.container. That was my mistake :)

[@mohankumar-cw5lw]

I like your video first then watch. You are such a great help .

[@CharmingData]

Thank you Mohan :) I'd love to see any web apps or dashboards that you might have created. On a side note, I am trying to gather more supporters to create higher quality educational tutorials on Dash 👨🏽‍🏫 My goal is to reach my first 15 supporters, and it would mean a lot if you were able to support me 😊 www.patreon.com/charmingdata Enjoy your weekend.

[@divyangpatel8803]

Hi. I would like to add floating card. Whenever I scroll, it should go down with the layout. Is there any way where we can achieve this?

[@CharmingData]

I think you would need to use javascript for that. That is not possible directly with Dash Bootstrap Components.

[@divyangpatel8803]

@@CharmingData Thanks.

[@zhannaorlova3261]

Hi, I have a question, so I have to input variables from my data analysis into the button component, or the card component and algo a function into a the color of the button depending on some scale I have. Could you make a video on inputing different variables and functions into the dash components code?

[@joelraucq]

Great video. Could you share the JavaScript code to make the cards draggable? Thank you.

[@CharmingData]

Hi Joel, please write me at [e-mail]

[@atrain1986]

Hey Adam, is it possible to resize the card images? Thanks for this video!

[@adriahuguet5357]

Really nice video! Is it possible to set column height to more than one row? Thank you!

[@CharmingData]

Hi Adria. I think it is. Maybe you can adjust the height of the card.

[@torsten156NRW]

Hi Adam, thanks for your videos. High quality! I have a question about the background color of a card. It is possible to change the color in a callback-function? I have setup the color with this code: "dbc.CardHeader("AT", className="card-text", style={'background-color': 'rgba(192, 192, 185, 0.44)', 'text-align': 'center', 'font-size': 36})" I would like to change the color in dependence of a int value. Thank's a lot...

[@CharmingData]

Yes, you would just have to access the style prop of the card id and return that background key value

[@torsten156NRW]

@@CharmingData Hi Adam, thanks. It works fine ;-)

[@leonardomolina8958]

Very goood tutorial! Can you see dash-auth in an upcoming video?

[@CharmingData]

Thanks Leonardo. I'll add it to the list. I have other videos I'm working on for the next couple of months. But I'll try to get to it

[@Dynamite_mohit]

Could you tell how can I put Wordcloud ओवर् CardImg section?

[@mariannakovalova8849]

Is it possible to make a card's body hidden? For example, add button "see more" and after press button see some information

[@CharmingData]

Yes. You can use the bootstrap fade or collapse. dash-bootstrap-components.opensource.faculty.ai/docs/components/alert/

[@keithmartinkinyua2067]

Hi .How can i plot two line graphs together in plotly.

[@CharmingData]

HI @Keith, what do you mean? Do you mean plotting two line graphs in the same card?

[@fgreve]

Do you know how can I put the image at the left of the card?

[@CharmingData]

Fernando, as far as I know, that's not possible with CardImg. If I find a way, I"ll let you know.

[@ThanosAstakos]

And what if i want to control also the height of a card? How can I create a card with a specific height? e.g. 780px

[@CharmingData]

Good question. Try inside the card to put: style={'height': '780px'} Does that work?

[@ThanosAstakos]

Thank you for the answer @@CharmingData! I did it already buuuut nothing! I hope that there will be a solution except CSSing hahaha

[@Dynamite_mohit]

Thank you charming data

[@nawalelboghdady9998]

Great videos as always! I have two cards on the same row but in different columns, and I'd like to make them both have the same height, otherwise it looks funny. dbc.CardDeck doesn't solve the issue because it sets both cards to the same width, which is something I do not want, and also messes up the alignment with the following rows. I have been racking my brain and the internet for a solution, but no luck! Thanks a lot in advance!

[@CharmingData]

I'm not sure, Nawal. Sorry

[@nawalelboghdady9998]

@@CharmingData No worries! Thanks a lot for getting back to me. In case anyone else hits this issue, a quick-and-dirty way is to set the height of the cards manually to a fixed value that works well for all the cards that should have the same height. The downside of this is scalability, so if you project on a smaller screen, components inside the cards may actually cross the border and it will look awful. Here is the code to do that: dbc.Card( [ dbc.CardHeader('Header'), dbc.CardBody(cards) ], color="light", outline=True, style={'height':'15rem'} ) The key is in this command: style={'height':'15rem'}, where the number 15 is something you adjust until you reach the desired effect. If you add this line to the cards that should have the same height, it should statically set the height of those cards to be the same. Again, the drawback is that this does not scale with different aspect ratios. Try zooming in on your browser to see how this will affect internal contents of the card...

[@CharmingData]

@@nawalelboghdady9998 Thank you for sharing.

[@henrytirla]

Hello I am trying to build this layout. imgur.com/MM2jhiH How will you suggest to wrap the second 8-column section to get that layout Taking into consideration it is all found within a single row. Thank you