Topic: Setting Boostrap card heights equal to one another

Ratnabh Kumar Rai free asked 3 years ago

I am using mdb bootstrap card in my project so when i have various items or say multiple cards the height of each card is different from the other due to difference in height of card-image as you can see here

so how do i set the height of all card-images equal?

<div class="col">
   <mdb-card  style="width:17rem;" class="c1">
   <div class="view rgba-white-slight waves-light" mdbWavesEffect>
   <mdb-card-img [src]="p?.imageurl" alt="Card image cap" class="cardimg"></mdb-card- 
   <div class="mask"></div>
   <h4>Card Title</h4>
   <mdb-card-text> Some quick example text to build on the card title and make up the bulk 
   of the card content.
   <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>

Damian Gemza staff answered 3 years ago


Please use this code example:

And you have to set the max-height for both img and img container.

Best Regards,


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: Mac
  • Browser: Chrome
  • OS: OS X
  • Provided sample code: No
  • Provided link: Yes