Topic: Help With Image Size for Cards

Christopher Stuart free asked 5 years ago

Hi all---i created a row with four cards--with a similar setup to the starter template in the first tutorial.  I want the same size cards, with the same size images.   I'm having a real tough time with the images--as I find they need to be the exact size or the whole card gets misaligned

Can see a picture of the misalignment---you can disregard everything under the images--as i'm still working on the alignment---but you can see if with the bike and the cheesecake images how just a miniscule difference in size is creating a misalignment of the cards.  Do I need to set a size for the images somewhere to help with this?

Marta Wierzbicka staff answered 5 years ago

Hi, could you send me your fileindex.html to look at this issue to and I'll help you. Best, Marta

Christopher Stuart free commented 5 years ago

you're awesome marta thanks! sending now

MDBootstrap staff answered 3 years ago

Hi infin,

I edited my snippet for you. I hope it fits your developer needs:

Best Regards, Piotr

MDBootstrap staff answered 3 years ago

Hi infin80,

I created a snippet with an example for you to use with your cards on the site you linked to ;)

Best Regards, Piotr

infin80 free commented 3 years ago

Thanks Piotr for quick reply! That's the default code where i started from. Are shadows, flipping, and adding a button underneath the cards within the limitations of MDBootstrap?

With the card flipped, I found it difficult to keep the text responsive while adding padding so the text is not up against the edges. (card image to use:

BTW I have the latest JQuery Pro version

infin80 free answered 3 years ago

Marta I can use your help w similar issue...

Three vertical images/same size (320x480px) in card format and I'm going for the flipping effect. I'm looking to add some/any kind of hover effect so people know to click. I'll compromise the fancy effects if too tricky.

Can you take a look here?

Scroll down to "Upcoming Events" and you'll see where I've gotten. It looks close but when responsiveness is invoked fuggetaboutit.

Thank you in advance, David

Marta Wierzbicka staff answered 3 years ago


would you create a snippet showing the problem here: If you create a demo of your code and describe in details your problem, I really could help you.

Best, Marta

sergeysh free answered 3 years ago

Hi, I have the same problem. The pictures are different, so get my cards (height). What can I do to fix it?

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No