Bootstrap - prevent div to expand due to a bigger text - html

Question

I'm having the below source code in HTML that basically is a Bootstrap card:
<div class="card shadow-none card-fluid mb-3 mb-md-5">
<div class="row">
<div class="col-md-3 col-lg-3 mb-3 mb-sm-0">
<img class="img-fluid rounded"
src="{% static 'img url' %}"
alt="Image Description">
</div>
<div class="col-md-9">
<div class="card-header py-md-0 py-lg-0 py-xl-0 pl-0 pr-0">
<h6 class="h5 mb-3">Text of 100 characters Text of 100 characters Text of 100
characters Text of 100 characters Text of 100 characters
</h6>
<p class="font-size-1">
Text of 20 characters.
</p>
</div>
<div class="card-body p-0 px-0 py-md-0 py-lg-0 py-xl-0">
<div class="row">
<div class="col-8 text-left">
<a class="d-inline-flex align-items-center">
<span class="static-rating static-rating-sm d-block mr-2">
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star-half-alt text-warning"></i>
</span>
</a>
<span class="d-inline-block">
<h6 class="mt-0 mb-2">4.95/5
<small class="text-white-70">(1.5k+)</small>
</h6>
</span>
</div>
</div>
</div>
<div class="card-footer p-3 py-md-2 py-lg-2 mt-xl-5">
<div class="row align-items-center">
<div class="col-6">
<button type="button"
class="btn btn-sm btn-link btn-icon-label hover-translate-y-n3">
<span class="btn-inner--icon btn-cust-icon">
<i class="mr-1" data-feather="edit-3"></i>
</span>
<span class="btn-inner--text">Edit</span>
</button>
</div>
<div class="col-6 text-right">
<button type="button"
class="btn btn-xs btn-outline-danger btn-icon-label hover-translate-y-n3">
<span class="btn-inner--icon">
<i data-feather="trash-2"></i>
</span>
<span class="btn-inner--text">Delete</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
The issue I'm facing is that depending on the size of the text within card-header class, the div corresponding to the one having class card-footer it moves up or down. Is there any way to keep the card-footer static and only to limit the size of the text to let's say 120 chars?
Edit
Added the following snippet:
.custom-css {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
/* number of lines to show */
-webkit-box-orient: vertical;
}
<li class="card shadow-none card-fluid mb-3 mb-md-5">
<div class="row">
<div class="col-md-3 col-lg-3 mb-3 mb-sm-0">
<img class="img-fluid rounded" src="{% static 'img url' %}" alt="Image Description">
</div>
<div class="col-md-9">
<div class="card-header py-md-0 py-lg-0 py-xl-0 pl-0 pr-0">
<h6 class="h5 mb-3 custom-css">Text 100 charactersText 100 charactersText 100 charactersText 100 charactersText 100 charactersText 100 charactersText 100 charactersText 100 charactersText 100 characterscharactersText 100 charactersText 100 charactersText 100 charactersText
100 charactersText 100 charactersText 100 charactersText 100 characterscharactersText 100 charactersText 100 charactersText 100 charactersText 100 charactersText 100 charactersText 100 charactersText 100 characters
</h6>
<p class="font-size-1">
Text length medium
</p>
</div>
<div class="card-body p-0 px-0 py-md-0 py-lg-0 py-xl-0">
<div class="row">
<div class="col-8 text-left">
<a class="d-inline-flex align-items-center">
<span class="static-rating static-rating-sm d-block mr-2">
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star-half-alt text-warning"></i>
</span>
</a>
<span class="d-inline-block">
<h6 class="mt-0 mb-2">4.95/5
<small class="text-white-70">(1.5k+ review-uri)</small>
</h6>
</span>
</div>
</div>
</div>
</div>
</div>
</li>

Answer 1

you could give it a min-height and max-height and also min-width and max-width to sort of contain it between these values.