For my WordPress theme coding, I rely on bootstrap 4
Struggling to understand why the row-eq-height class isn't functioning as expected in bootstrap columns.
https://i.sstatic.net/R33K4.jpg
Here are my codes:
<?php get_header(); ?>
<div class="container mt-4 ">
<strong><?php echo single_cat_title(); ?> </strong> <hr>
<div class="row row-eq-height ">
<?php while ( have_posts() ) : the_post(); ?>
<div class="col-md-4">
<div class="card mb-4 border-dark">
<img class="card-img-top" src="//placeimg.com/290/180/any" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h5>
<p class="card-text"><?php the_excerpt(''); ?></p>
<a href="<?php the_permalink(); ?>" class="btn btn-dark btn-sm">More..</a>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
<?php get_footer(); ?>
I've even tried adding the row-eq-height class manually in CSS, but still no luck.
Where am I going wrong?
Edit: Here is a snippet of generated code that might provide some clues:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row ">
<div class="col-md-4">
<div class="card mb-4 border-dark">
<img class="card-img-top" src="//placeimg.com/290/180/any" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><a href="http://localhost/alfa/selam/" title="Selam">Selam</a></h5>
<p class="card-text"></p><p>dsff nmfgmnf</p>
<p></p>
<a href="http://localhost/alfa/selam/" class="btn btn-dark btn-sm">More..</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 border-dark">
<img class="card-img-top" src="//placeimg.com/290/180/any" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><a href="http://localhost/alfa/merhaba-dunya/" title="Merhaba dünya!">Merhaba dünya!</a></h5>
<p class="card-text"></p><p>The standard Lorem Ipsum passage, used since the 1500s “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse […]</p>
<p></p>
<a href="http://localhost/alfa/merhaba-dunya/" class="btn btn-dark btn-sm">More..</a>
</div>
</div>
</div>
</div></div>