I have the following HTML source code for 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 encountering is that depending on the length of the text within the card-header class, the corresponding div with the card-footer class moves up or down. Is there a way to keep the card-footer fixed and limit the text size to, let's say, 120 characters?
Edit
Added the following code 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>