This snippet should show a horizontal Bootstrap card containing a .collapse which uses min- and max-height to implement a partial collapse. (Please run in full page mode in case scrollbars don’t allow the card’s vertical height to be shown):
.collapse.collapse-partial.collapse-mh-parent:not(.show) {
max-height: 200px !important;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.collapse-partial.collapse-mh-parent.collapsing {
min-height: 200px !important;
}
button.collapse-partial.collapsed:after {
content: '+ Read More';
}
button.collapse-partial:not(.collapsed):after {
content: '- Read Less';
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="card">
<div class="row g-0">
<div class="col-4">
<div class="bg-black position-relative mh-inherit rounded-start" style="">
<img src="https://dummyimage.com/400x700/000/fff" alt="suede" class="card-img-top img-fluid opacity-6 mh-inherit" style="object-fit: cover;object-position: center;">
<div class="card-img-overlay text-white d-flex align-items-end justify-content-between">
<h1 class="card-title text-white mb-0">suede</h1>
<div class="text-white">
<button class="btn icon-md bg-dark bg-opacity-75 text-white rounded-circle m-1"><i class="fa fa-play"></i></button>
<div class="dropdown icon-md">
<button class="btn icon-md bg-dark bg-opacity-75 text-white rounded-circle m-1" type="button" data-bs-toggle="dropdown" aria-expanded="false" title="Add tracks to playlist"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="col-8">
<div class="card-body d-flex flex-column justify-content-between h-100">
<div id="artist-info" class="d-flex flex-grow-1 text-center text-md-start flex-column align-items-center overflow-hidden collapse collapse-partial collapse-mh-parent">
<div class="mb-1">
<div class="row justify-content-center">
<div class="col-auto">
<a href="/genre/GLAM%20ROCK" class="nav-link badge bg-success bg-opacity-10 text-success mb-2 fw-bold">GLAM ROCK</a>
<a href="/genre/POP%2FROCK" class="nav-link badge bg-success bg-opacity-10 text-success mb-2 fw-bold">POP/ROCK</a>
</div>
</div>
</div>
<div class="mb-3 text-center">
<div class="btn-group">
<button class="btn btn-info-soft btn-xs" type="button">Unrated</button>
</div>
</div>
<div class="mb-1">
English alternative rock band from London formed in 1989, disbanded 2003.<br>
Reunited in 2010 for a series of concerts, the band released four studio albums and two live albums since then.<br>
<br>
Due to legal issues, the band releases its records under the name "The London Suede" in the USA.
English alternative rock band from London formed in 1989, disbanded 2003.<br>
Reunited in 2010 for a series of concerts, the band released four studio albums and two live albums since then.<br>
<br>
Due to legal issues, the band releases its records under the name "The London Suede" in the USA.
English alternative rock band from London formed in 1989, disbanded 2003.<br>
Reunited in 2010 for a series of concerts, the band released four studio albums and two live albums since then.<br>
<br>
Due to legal issues, the band releases its records under the name "The London Suede" in the USA.
</div>
</div>
<div class="d-flex justify-content-center">
<button class="btn btn-info-soft btn-xs collapse-partial collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#artist-info" aria-expanded="false" aria-controls="artist-info">
</button>
</div>
</div>
</div>
</div>
</div>Currently I have to set the heights with absolute px values. However, this means that the .collapse area doesn’t naturally fill its area.
How can I, by default, get the .collapse-partial to fill all vertical space?
When Read more is clicked the card should expand vertically to show all the content. The image should not resize.