Extend Height of Single Bootstrap Card - Not All Cards In Row

Question

I am running into an issue where I need to extend the height of a single bootstrap card in a tile-module layout, and not have it effect the height of any other card in the row. The following html structure is what I 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 goal here is to dynamically hide/show a card's paragraph text div depending if the content is longer than X characters. I can add the JavasScript logic showing the button which extends the height of a single card just fine. The problem that I'm running into is now when I click the 'show' logic for a single card and extend the height of this paragraph, it extends the height for all cards in that section, and not just the single card I am adjusting. I am adding the css style directly to the element and not all elements with the single class, to try to target only this single card and not all cards with the same css class: but this doesn't help either.

Every online question I find is where the OP is trying to extend height for all cards in a row, which is the opposite of what I am trying to do and I can't figure out a solution. I would rather not have to rebuild this entire layout to meet my requirements, but then again I'm new to bootstrap and not sure how to best approach this requirement.

Can you please add your "show logic"? – zgood Jun 22 '20 at 14:43 — zgood, Jun 22 '20 at 14:43

score 1 · Answer 1 · answered Jun 22 '20 at 15:30

I don't have a great way to test this but I'd assume the .card in Bootstrap is using flexbox to create the tile layout. By default, a row of flex elements all try to maintain the height of the tallest element.

I don't know Bootstrap well enough to provide a native solution. But I can tell you how I would approach it in normal CSS.

You can try adding align-self: flex-start; to the individual .card you're expanding (I'd toggle a js class that overrides the Bootstrap class) as discussed here.

However, I'd be willing to bet that will cause other rows to have issues and your card will overlap in strange ways.

The way to fix that is by creating a wrapper to get the flex layout properties. Then on expand give the card absolute position, z-index and allow the content to expand its height.

HTML:

<div class="cardContainer>
   <div class="card">card content ... </div>
</div>

And CSS:

.cardContainer {
   position: relative;
}
.card.expanded {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   /* no bottom position to allow content to expand it outside the container */
   z-index: 50 /*some higher number to put it at the top */
}

Extend Height of Single Bootstrap Card - Not All Cards In Row

1 Answers1