I've encountered an issue where I need to increase the height of a single bootstrap card in a tile-module layout without affecting the height of any other cards in the same row. The code snippet below shows the HTML structure I currently have:
<div class="module tile-module">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-4">
<div class="card">
<div class="card-img-top">
</div>
<div class="card-body">
<h3>Title Here</h3>
<p class="card-text">Long text here...</p>
</div>
</div>
<div class="card">
<div class="card-img-top">
</div>
<div class="card-body">
<h3>Title Here</h3>
<p class="card-text">Long text here...</p>
</div>
</div>
<div class="card">
<div class="card-img-top">
</div>
<div class="card-body">
<h3>Title Here</h3>
<p class="card-text">Long text here...</p>
</div>
</div>
</div>
</div>
</div>
</div>
My aim is to dynamically show/hide the paragraph text in a card based on its length exceeding a certain number of characters. While I can implement JavaScript logic to toggle the visibility of the text, the problem arises when extending the height of one card affects all the cards in that section, rather than just the targeted card. I've tried applying CSS styles directly to the element instead of all elements with the same class, but it hasn't solved the issue.
Most online solutions focus on increasing the height for all cards in a row, which is contrary to what I'm trying to achieve. I'm struggling to find a solution without completely redesigning the layout to fit my needs. As a newcomer to Bootstrap, I'm unsure of the best approach to tackle this requirement.