0

I have card in bootstrap 4. It is populated dynamically from database with text & image. if image is null or empty or card text is big then card height is increased. It is very annoyed to see. Here is the image

enter image description here

Above attached image show two card. One has image and another has no image. card not shows equal. Besides without card image , text placed in top. I have used bellow code to populate

           var html = '';
            for(var i = 0; i < data.length;i++){
                var item = data[i];
                 var img = item.photo;
                 html += '<div class="card row-eq-height" style="margin-right: 1rem !important; "  title="click add '+item.name+' to cart">';
                html += '<img class="card-img-top" src="'+img+'" alt="Card image cap" style="widht:50px;height:100px;">';
                html += '<div class="card-body" style="padding:2px 5px;">';
                html += '<p class="card-text" style="line-height:1.0em;overflow-y: auto;  max-height: 50px;">'+item.name+'</p>';
                html += '</div>';
                html += '</div>';
            }

I want keep equal height & width of each card. if image empty text show bellow. If text is big text will be scroll .

Please help me to find out the solution

Enamul Haque
  • 4,789
  • 1
  • 37
  • 50
  • 1
    I believe you should put Bootstrap's ```row-eq-height``` class on the container for the cards and not the cards themselves as done in [this example from their site](http://getbootstrap.com.vn/examples/equal-height-columns/). – Chris B. Jun 01 '19 at 04:05
  • There's no reason to use row-eq-height and that's *not* a Bootstrap class. And, `http://getbootstrap.com.vn/` is a 3rd party port of Bootstrap 3.x. Please show all of the relevant HTML markup as it's rendered. Bootstrap 4 columns are equal height: https://stackoverflow.com/questions/44451246/bootstrap-4-cards-of-same-height-in-columns – Carol Skelly Jun 01 '19 at 09:07

0 Answers0