Make columns same height when stacked on top of each other Bootstrap 5

Question

Is it possible to make columns the same height even when they turn into rows on mobile?

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
      <div class="col-sm-6" style="background-color:red">hi</div>
      <div class="col-sm-6" style="background-color:yellow">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper odio a maximus ultrices. Sed vitae pellentesque mi. Aenean sit amet eleifend augue. Donec lobortis lacinia nibh, nec scelerisque turpis scelerisque a. Maecenas id aliquam ante. Sed nec ornare sem. In nec fermentum odio.
      </div>
    </div>

On a smaller screen, the columns would stack on top of each other. The one with text would be long.. but the empty one would disappear. How to I make them the same height?

score 1 · Answer 1 · answered Mar 10 '22 at 19:46

1

Add following JS code:

if (window.screen.width <= 600) {
  const columns = document.querySelectorAll(".col-sm-6")

  const maxHeight = Math.max(columns[0].offsetHeight, columns[1].offsetHeight)

  columns.forEach(column => { column.style.height = `${maxHeight}px` })
}

answered Mar 10 '22 at 19:46

Konstantinos Gallis

956
6
11

So it’s not possible with CSS then? I thought one of the more modern properties like flexbox might offer a solution to this. But I also wasn’t able to find anything any working example – Christine Wilson Mar 10 '22 at 22:29
Unfortunately, I do not think it is possible with CSS, when `flex-direction` is `column`. That's why I suggested a more dynamic way with JS. – Konstantinos Gallis Mar 11 '22 at 16:45

score 1 · Answer 2 · answered Mar 11 '22 at 07:37

I would prefer u to use media queries :D

so 1st give a same class to both of them like the following below:

 <div class="row">
    <div class="sm-same-height col-sm-6" style="background-color:red">hi</div>
      <div class="sm-same-height col-sm-6" style="background-color:yellow">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper odio a maximus ultrices. Sed vitae pellentesque mi. Aenean sit amet eleifend augue. Donec lobortis lacinia nibh, nec scelerisque turpis scelerisque a. Maecenas id aliquam ante. Sed nec ornare sem. In nec fermentum odio.
      </div>
    </div>

and 2nd add some of the CSS like that :

@media screen and (min-width: 375px) {
  .sm-same-height{
    height:125px; 
   }
 }

(min-width: 375px) is the responsive size of mobile phone :)

hope it hepls you <3

Thanks but this requires we know the height of content when you can make the screen any size.. which is a lot of work — Christine Wilson, Mar 11 '22 at 15:59

score 1 · Answer 3 · answered Mar 11 '22 at 15:57

1

Okay I found the answer already written on Stack Overflow. If you want to use CSS and don't know the height of the longest container, you can use CSS grid layout.

Equal height rows in CSS Grid Layout

Then I used this only on smaller screens

@media (max-width: 767.98px) { 
.row{
    display: grid !important;
    grid-auto-rows: 1fr;
}
}

answered Mar 11 '22 at 15:57

Christine Wilson

569
2
7
14

I do not know if I would combine `flexbox` and `grid` in your case. Using the class `col-sm-6`, you are under the media query `@media (min-width: 576px)`. – Konstantinos Gallis Mar 11 '22 at 16:49

Make columns same height when stacked on top of each other Bootstrap 5

3 Answers3