Make these columns equal height - html

Question

I'm having trouble making these columns equal height. When the title is longer it pushes the column down and makes it larger than the others. how can I make the columns equal height even when the length of the titles are different?
I tried these answers: How can I make Bootstrap columns all the same height?
but they didn't work.
I'm using Bootstrap 4.
Here is my code:
#courses1 {
padding-top: 50px;
padding-bottom: 50px;
background-image: url('');
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
position: relative;
z-index: 1;
}
#courses1::before {
background-color: #ffffff;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
z-index: -1;
}
#courses1 .course-list {
margin-top: 55px;
}
#courses1 .course-list .course-container {
border-width: 1px;
border-color: #e6e5e5;
border-style: solid;
}
#courses1 .course-list .course-container .course-title {
margin-top: 25px;
margin-bottom: 25px;
}
#courses1 .course-list .course-container .course-title h5 {
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
#courses1 .course-list .course-container .course-title h5 a {
font-weight: 600;
color: #101111;
}
#courses1 .course-list .course-container .course-image img {
width: 100%;
}
#courses1 .course-list .course-container .course-bottom-container .course-meta {
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
border-top-width: 1px;
border-top-color: #e6e5e5;
border-top-style: solid;
}
#courses1 .course-list .course-container .course-bottom-container .course-meta .course-icons {
color: rgb(128, 129, 129);
font-size: 14px;
}
#courses1 .course-list .course-container .course-bottom-container .course-meta .free-course p {
color: rgb(7, 134, 113);
font-size: 14px;
font-weight: 600;
}
#courses1 .course-list .course-container .course-bottom-container .course-meta .course-pricing a {
color: rgb(231, 80, 10);
font-size: 14px;
font-weight: 600;line-height: 24px;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section id="courses1">
<div class="container">
<div class="row course-list">
<div class="col-md-6 col-lg-3 course-list-col">
<div class="course-container">
<div class="course-image">
<img src="https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__340.jpg" alt="" class="img-fluid">
</div>
<div class="course-title">
<h5>
This is a post with a long title
</h5>
</div>
<div class="course-bottom-container">
<div class="course-meta d-flex justify-content-between">
<div class="course-icons">
<i class="fas fa-users" aria-hidden="true"></i> 369
<i class="fas fa-comments" aria-hidden="true" style="margin-left: 10px;"></i> 187
</div>
<div class="free-course">
<p>FREE</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 course-list-col">
<div class="course-container">
<div class="course-image">
<img src="https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__340.jpg" alt="" class="img-fluid">
</div>
<div class="course-title">
<h5>
Short title post
</h5>
</div>
<div class="course-bottom-container">
<div class="course-meta d-flex justify-content-between">
<div class="course-icons">
<i class="fas fa-users" aria-hidden="true"></i> 369
<i class="fas fa-comments" aria-hidden="true" style="margin-left: 10px;"></i> 187
</div>
<div class="free-course">
<p>FREE</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 course-list-col">
<div class="course-container">
<div class="course-image">
<img src="https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__340.jpg" alt="" class="img-fluid">
</div>
<div class="course-title">
<h5>
This is another post with a very long, long, long title
</h5>
</div>
<div class="course-bottom-container">
<div class="course-meta d-flex justify-content-between">
<div class="course-icons">
<i class="fas fa-users" aria-hidden="true"></i> 369
<i class="fas fa-comments" aria-hidden="true" style="margin-left: 10px;"></i> 187
</div>
<div class="free-course">
<p>FREE</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 course-list-col">
<div class="course-container">
<div class="course-image">
<img src="https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__340.jpg" alt="" class="img-fluid">
</div>
<div class="course-title">
<h5>
Another short title
</h5>
</div>
<div class="course-bottom-container">
<div class="course-meta d-flex justify-content-between">
<div class="course-icons">
<i class="fas fa-users" aria-hidden="true"></i> 369
<i class="fas fa-comments" aria-hidden="true" style="margin-left: 10px;"></i> 187
</div>
<div class="course-pricing">
<p>$49 <i class="fas fa-shopping-cart"></i></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

Answer 1

Just adding some class and you will be fine:
Add d-flex h-100 flex-column to course-container to make it full height and still appear as intended.
Another 'mt-autotocourse-bottom-container` to make the bottom box always in the bottom no matter what.
Edit: I'm just adding to the second box so you can compare the different, add the same to other box will achieve what you want.
#courses1 {
padding-top: 50px;
padding-bottom: 50px;
background-image: url('');
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
position: relative;
z-index: 1;
}
#courses1::before {
background-color: #ffffff;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
z-index: -1;
}
#courses1 .course-list {
margin-top: 55px;
}
#courses1 .course-list .course-container {
border-width: 1px;
border-color: #e6e5e5;
border-style: solid;
}
#courses1 .course-list .course-container .course-title {
margin-top: 25px;
margin-bottom: 25px;
}
#courses1 .course-list .course-container .course-title h5 {
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
#courses1 .course-list .course-container .course-title h5 a {
font-weight: 600;
color: #101111;
}
#courses1 .course-list .course-container .course-image img {
width: 100%;
}
#courses1 .course-list .course-container .course-bottom-container .course-meta {
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
border-top-width: 1px;
border-top-color: #e6e5e5;
border-top-style: solid;
}
#courses1 .course-list .course-container .course-bottom-container .course-meta .course-icons {
color: rgb(128, 129, 129);
font-size: 14px;
}
#courses1 .course-list .course-container .course-bottom-container .course-meta .free-course p {
color: rgb(7, 134, 113);
font-size: 14px;
font-weight: 600;
}
#courses1 .course-list .course-container .course-bottom-container .course-meta .course-pricing a {
color: rgb(231, 80, 10);
font-size: 14px;
font-weight: 600;line-height: 24px;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section id="courses1">
<div class="container">
<div class="row course-list">
<div class="col-md-6 col-lg-3 course-list-col">
<div class="course-container">
<div class="course-image">
<img src="https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__340.jpg" alt="" class="img-fluid">
</div>
<div class="course-title">
<h5>
This is a post with a long title
</h5>
</div>
<div class="course-bottom-container">
<div class="course-meta d-flex justify-content-between">
<div class="course-icons">
<i class="fas fa-users" aria-hidden="true"></i> 369
<i class="fas fa-comments" aria-hidden="true" style="margin-left: 10px;"></i> 187
</div>
<div class="free-course">
<p>FREE</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 course-list-col">
<div class="course-container d-flex h-100 flex-column">
<div class="course-image">
<img src="https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__340.jpg" alt="" class="img-fluid">
</div>
<div class="course-title">
<h5>
Short title post
</h5>
</div>
<div class="course-bottom-container mt-auto">
<div class="course-meta d-flex justify-content-between">
<div class="course-icons">
<i class="fas fa-users" aria-hidden="true"></i> 369
<i class="fas fa-comments" aria-hidden="true" style="margin-left: 10px;"></i> 187
</div>
<div class="free-course">
<p>FREE</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 course-list-col">
<div class="course-container">
<div class="course-image">
<img src="https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__340.jpg" alt="" class="img-fluid">
</div>
<div class="course-title">
<h5>
This is another post with a very long, long, long title
</h5>
</div>
<div class="course-bottom-container">
<div class="course-meta d-flex justify-content-between">
<div class="course-icons">
<i class="fas fa-users" aria-hidden="true"></i> 369
<i class="fas fa-comments" aria-hidden="true" style="margin-left: 10px;"></i> 187
</div>
<div class="free-course">
<p>FREE</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 course-list-col">
<div class="course-container">
<div class="course-image">
<img src="https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__340.jpg" alt="" class="img-fluid">
</div>
<div class="course-title">
<h5>
Another short title
</h5>
</div>
<div class="course-bottom-container">
<div class="course-meta d-flex justify-content-between">
<div class="course-icons">
<i class="fas fa-users" aria-hidden="true"></i> 369
<i class="fas fa-comments" aria-hidden="true" style="margin-left: 10px;"></i> 187
</div>
<div class="course-pricing">
<p>$49 <i class="fas fa-shopping-cart"></i></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

Answer 2

Your columns are already the same height, you just have to set the height of your course-container to 100% to see it. If you then also want to have the footer aligned the same over each card and stuff, you can achieve this by styling your cards with flexbox.
Also check out bootstrap's card components, these might be helpful to you as a starting point:
#courses1 {
padding-top: 50px;
padding-bottom: 50px;
background-image: url('');
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
position: relative;
z-index: 1;
}
#courses1::before {
background-color: #ffffff;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
z-index: -1;
}
#courses1 .course-list {
margin-top: 55px;
}
#courses1 .course-list .course-container {
border-width: 1px;
border-color: #e6e5e5;
border-style: solid;
height: 100%; /* To show that all columns have same height! */
}
#courses1 .course-list .course-container .course-title {
margin-top: 25px;
margin-bottom: 25px;
}
#courses1 .course-list .course-container .course-title h5 {
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
#courses1 .course-list .course-container .course-title h5 a {
font-weight: 600;
color: #101111;
}
#courses1 .course-list .course-container .course-image img {
width: 100%;
}
#courses1 .course-list .course-container .course-bottom-container .course-meta {
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
border-top-width: 1px;
border-top-color: #e6e5e5;
border-top-style: solid;
}
#courses1 .course-list .course-container .course-bottom-container .course-meta .course-icons {
color: rgb(128, 129, 129);
font-size: 14px;
}
#courses1 .course-list .course-container .course-bottom-container .course-meta .free-course p {
color: rgb(7, 134, 113);
font-size: 14px;
font-weight: 600;
}
#courses1 .course-list .course-container .course-bottom-container .course-meta .course-pricing a {
color: rgb(231, 80, 10);
font-size: 14px;
font-weight: 600;line-height: 24px;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section id="courses1">
<div class="container">
<div class="row course-list">
<div class="col-md-6 col-lg-3 course-list-col">
<div class="course-container">
<div class="course-image">
<img src="https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__340.jpg" alt="" class="img-fluid">
</div>
<div class="course-title">
<h5>
This is a post with a long title
</h5>
</div>
<div class="course-bottom-container">
<div class="course-meta d-flex justify-content-between">
<div class="course-icons">
<i class="fas fa-users" aria-hidden="true"></i> 369
<i class="fas fa-comments" aria-hidden="true" style="margin-left: 10px;"></i> 187
</div>
<div class="free-course">
<p>FREE</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 course-list-col">
<div class="course-container">
<div class="course-image">
<img src="https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__340.jpg" alt="" class="img-fluid">
</div>
<div class="course-title">
<h5>
Short title post
</h5>
</div>
<div class="course-bottom-container">
<div class="course-meta d-flex justify-content-between">
<div class="course-icons">
<i class="fas fa-users" aria-hidden="true"></i> 369
<i class="fas fa-comments" aria-hidden="true" style="margin-left: 10px;"></i> 187
</div>
<div class="free-course">
<p>FREE</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 course-list-col">
<div class="course-container">
<div class="course-image">
<img src="https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__340.jpg" alt="" class="img-fluid">
</div>
<div class="course-title">
<h5>
This is another post with a very long, long, long title
</h5>
</div>
<div class="course-bottom-container">
<div class="course-meta d-flex justify-content-between">
<div class="course-icons">
<i class="fas fa-users" aria-hidden="true"></i> 369
<i class="fas fa-comments" aria-hidden="true" style="margin-left: 10px;"></i> 187
</div>
<div class="free-course">
<p>FREE</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 course-list-col">
<div class="course-container">
<div class="course-image">
<img src="https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__340.jpg" alt="" class="img-fluid">
</div>
<div class="course-title">
<h5>
Another short title
</h5>
</div>
<div class="course-bottom-container">
<div class="course-meta d-flex justify-content-between">
<div class="course-icons">
<i class="fas fa-users" aria-hidden="true"></i> 369
<i class="fas fa-comments" aria-hidden="true" style="margin-left: 10px;"></i> 187
</div>
<div class="course-pricing">
<p>$49 <i class="fas fa-shopping-cart"></i></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>