'How to make Bootstrap5 Columns all a similar height?

I'm using Bootstrap5. However, I'd just like to make a similar height of these two columns. How can I do that? Here's the Code:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
    <div style="background-color:LightGray" class="container-1 col-xs-6" >
        Cake
        <img src="https://www.mybakingaddiction.com/wp-content/uploads/2011/10/lr-0953.jpg" alt="Cake"/>
<div style="background-color:Gray" class="container-2 col-xs-6">
        Content
    </div>
    </div>
</div>
</div>
htmlcssheight


Solution 1:[1]

Maybe this can help

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <h2>Cake</h2>
    <div class="col-6">
      <img class="img-fluid" src="https://www.mybakingaddiction.com/wp-content/uploads/2011/10/lr-0953.jpg"
        alt="Cake" />
    </div>
    <div class="col-6" style="background-color:Gray">
      Content
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions