Equal Height Column Working Only On Desktop - html

Question

I have code in my bootstrap 5 website like this
<div class="row mt-3">
<div class="col-md-6 mt-3 mt-md-0">
<a href="post/good-morning-status-shayari-68346" class="h-100"><img src="https://via.placeholder.com/500x500/" class="img-fluid blog-img lzy_img" alt="Good Morning Status Shayari" width="100%" height="100%">
</a>
</div>
<div class="col-md-6 mt-3 mt-md-0">
<div class="bg-dark text-white blog_content d-flex flex-column bg-black h-100 text-center pt-3 pb-3 px-3 mx-3">
<h5>સપનાઓ ચા જેવા કડક હોવા </h5>
<div class="d-flex flex-grow-1 justify-content-center align-items-center mb-0">
<div class="">
<p class="">સપનાઓ ચા જેવા<br> કડક હોવા જોઈએ સાહેબ,<br> જે રાતની ઊંઘ છીનવી લે !!<br> 💐🌷🌹શુભ સવાર🌹🌷💐</p>
</div>
</div>
<div class="time d-flex justify-content-between align-items-center align-items-end mt-auto border-top pt-3">
<div class="left text-start">
<h6 class="mb-0"><a class="link-bold" href="https://stag.example.com/gu/category/gujarati-good-morning-status-shayari">શુભ સવાર સ્ટેટસ શાયરી</a></h6>
<p class="mb-0"><small>6 days ago</small></p>
</div>
<div class="right">
</div>
</div>
</div>
</div>
</div>
Its working fine and output like this in desktop:
But in Mobile doesn't have equal height and it's looking like:
Basically I want same height column as image in mobile device too but its not working. I am using bootstrap 5.2.
I have added code in codeplay for text.
Let me know if someone here can help me for solve the puzzle.

Answer 1

This can easily be accomplished by using the aspect ratio helper classes. Just apply .ratio.ratio-1x1 to the inner wrapper within the .col-md-6s.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<div class="row mt-3">
<div class="col-md-6 mt-3 mt-md-0">
<a href="post/good-morning-status-shayari-68346" class="h-100 ratio ratio-1x1"><img src="https://via.placeholder.com/500x500/" class="img-fluid blog-img lzy_img" alt="Good Morning Status Shayari" width="100%" height="100%">
</a>
</div>
<div class="col-md-6 mt-3 mt-md-0">
<div class="bg-dark text-white blog_content d-flex flex-column bg-black h-100 text-center pt-3 pb-3 px-3 mx-3 ratio ratio-1x1">
<h5>સપનાઓ ચા જેવા કડક હોવા </h5>
<div class="d-flex flex-grow-1 justify-content-center align-items-center mb-0">
<div class="">
<p class="">સપનાઓ ચા જેવા<br> કડક હોવા જોઈએ સાહેબ,<br> જે રાતની ઊંઘ છીનવી લે !!<br> 💐🌷🌹શુભ સવાર🌹🌷💐</p>
</div>
</div>
<div class="time d-flex justify-content-between align-items-center align-items-end mt-auto border-top pt-3">
<div class="left text-start">
<h6 class="mb-0"><a class="link-bold" href="https://stag.example.com/gu/category/gujarati-good-morning-status-shayari">શુભ સવાર સ્ટેટસ શાયરી</a></h6>
<p class="mb-0"><small>6 days ago</small></p>
</div>
<div class="right">
</div>
</div>
</div>
</div>
</div>

Answer 2

.col-md-6 img {height: 100%;}
.col-md-6 { text-align: center; height:500px; }