responsive card

Hi Freinds I have container with dynamic card bootstrap I want to center card when in middle when is 1 card an 2 .when 3 i want 2 card beside col 6 top and 1 in second row centered And when more 4 card i want to see 2/2 card
12 Replies
Kevin Powell
Kevin Powell3y ago
No way to do that with Bootstraps .col system afaik. You could do something with their d-flex class and a few other things though, I think. Here is a super crude example. I had to make a .card-container class and give it a max-width. Maybe there is a way to do that that's more bootstrappy, but I have no idea as I haven't used it in so long
M@HeR
M@HeR3y ago
Thanks @Kevin I want to to do this dynamically without calculating number of card
Kevin Powell
Kevin Powell3y ago
My example above works dynamically
M@HeR
M@HeR3y ago
i try it but not work i have removed the col-6 but same issue i use card of mui 5
Kevin Powell
Kevin Powell3y ago
The Codepen I linked above has everything you need. You cant use their column system, you need to just used d-flex
M@HeR
M@HeR3y ago
i will send you codesandbox and sorry for asking
Kevin Powell
Kevin Powell3y ago
No problem asking!
M@HeR
M@HeR3y ago
im thankful honestly i see all your vedio and is amazing your channel is best of my favorite channel im thankfull it work for 3 and more but in 1 and 2
M@HeR
M@HeR3y ago
i want
M@HeR
M@HeR3y ago
in the center of container if 2 i want them in center also i think the only solution is to calculate number of data and make diferent render
Want results from more Discord servers?
Add your server