How to make Bootstrap5 Columns all a similar height?

Question

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/bootstrap@5.0.2/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>

does this help: https://stackoverflow.com/questions/19695784 — Akber Iqbal, May 12 '22 at 23:30

Tamam45 · Answer 1 · 2022-05-13T01:02:53.270

0

Maybe this can help

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>

edited May 13 '22 at 01:02

answered May 13 '22 at 00:09

Tamam45

36
4

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 13 '22 at 22:12

score 0 · Answer 2 · edited Jun 14 '22 at 23:56

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>

col-xs-6 is not working in bootstrap5 so you can use col-6 instead of col-xs-6 and div closing and are used not properly

How to make Bootstrap5 Columns all a similar height?

2 Answers2