Adjustable row heights with bootstrap 4 - html

Question

I'm using bootstrap columns to display expanding cards. When one expands though, it pushes the whole row underneath it down.
Unexpanded:
Currently how it behaves expanded:
How I'd like it to behave:
I've been reading about flexbox, but I cant find any good examples of the desired behavior, while maintaining responsive design.
Currently the code is along the lines of
<div class="row">
<div class="col-xl-4 col-lg-5 col-12">
expanding content...
</div>
.
.
.
<div class="col-xl-4 col-lg-5 col-12">
expanding content...
</div>
</div>

Answer 1

Maybe you could try giving it a css height: property. This can be done through Javascript, so when you're expanding the box, also give it a certain height to limit it. Tell me if you'd like me to do it for you :)

Answer 2

I see 2 possibilities:
1. Solution: Have you checked out the bootstrap-component card-columns? It organizes the cards into Masonry-like columns.
By using
.card-columns {
#include media-breakpoint-only(lg) {
column-count: 4;
}
#include media-breakpoint-only(xl) {
column-count: 5;
}
}
you can make them responsive.
2. Solution:
You use just 3 cols:
.row {
margin-top: 20px;
align-content: flex-start;
}
.card {
padding: 10px;
margin-bottom: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-4">
<div class="card">
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.
</div><!-- card -->
<div class="card">
Lorem
</div><!-- card -->
</div><!-- col -->
<div class="col-4">
<div class="card">
Lorem
</div><!-- card -->
<div class="card">
Lorem
</div><!-- card -->
</div><!-- col -->
<div class="col-4">
<div class="card">
Lorem
</div><!-- card -->
<div class="card">
Lorem
</div><!-- card -->
</div><!-- col -->
</div><!--row -->

Answer 3

Ok, so after some trial and error I managed
--HTML--
<div id="redDiv" style="background-color: red; height: 100px; width: 10%; float:
left;">
<p>This is a div</p>
</div>
--JavaScript--
var onWindowLoaded = () =>{
document.getElementById("redDiv").setAttribute("style", "height: 150px; background-
color:red; width: 10%;");
}
window.addEventListener("load", onWindowLoaded);
So it's important to note that I used a red background in order to tell how long my div was, I see you're using a greyish background (It was hard to see them to be honest). So basically once the page loads it will set the div to the height indicated in the setAttribute() function, I had to re-add the colour because modifying the div height through javascript made the colour disappear completely. Hope this helps :)

Answer 4

When overriding css values while working with bootstrap try using
!important
For example:
row {
height: 150px !important;
}