Bootstrap expand one column adds height to all adjacent columns

Question

I have a 4 column layout in bootstrap. Every column has text and a "Show more" button that expands and show more content when clicked.

The problem I am facing is that when the "Show more" link is clicked, not only does the content of that column expands, but it also expands the height , not the content of all other columns too. The extra content of the other columns is not expanded.

I know the problem comes from the bootstrap col-4 class. But I need that class to keep a responsive design. I only want the column which I clicked on the "Show more" to expand. Any ideas on how to prevent the other column from expanding in height?

My code:

<script>
$(document).ready(function () {
    $('#collapseExample1').on('click', function () {
        var text=$('#collapseExample1').text();
        if(text === "Show more"){
            $(this).html("Show less");
        } else{
            $(this).html("Show more");
        }
     });
     $('#collapseExample2').on('click', function () {
         var text=$('#collapseExample2').text();
         if(text === "Show more"){
            $(this).html("Show less");
        } else{
            $(this).html("Show more");
        }
     });
     $('#collapseExample3').on('click', function () {
         var text=$('#collapseExample3').text();
         if(text === "Show more"){
            $(this).html("Show less");
        } else{
            $(this).html("Show more");
        }
     });
     $('#collapseExample4').on('click', function () {
         var text=$('#collapseExample4').text();
         if(text === "Show more"){
            $(this).html("Show less");
        } else{
            $(this).html("Show more");
        }
     });
});
</script>

<style>
    .card {
        width: 273px;
        min-height: 503px;
        border-radius: 7px;
        box-shadow: 0 0 8px 4px rgba(0,0,0,0.1);
        margin: 0 10px;
        position: relative;
        overflow: hidden;
}
</style>

<div class="d-flex justify-content-center">
    <div class="col-4 card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example' id='collapseExample1' class='card-link'>Show more</a>
        </div>
    </div>
    <div class="col-4 card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example2">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example2' id='collapseExample2' class='card-link'>Show more</a>
        </div>
    </div>
    <div class="col-4 card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example3">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example3' id='collapseExample3' class='card-link'>Show more</a>
        </div>
    </div>
    <div class="col-4 card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example4">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example4' id='collapseExample4' class='card-link'>Show more</a>
        </div>
    </div>
</div>

Answer 1

Just add wrapper with col-4 like this

<div class="col-4">
    <div class="card">

 .card { width: 273px; min-height: 50px; border-radius: 7px; box-shadow: 0 0 8px 4px rgba(0,0,0,0.1); margin: 0 10px; position: relative; overflow: hidden; }

 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="d-flex justify-content-center"> <div class="col-4"> <div class="card"> <div class="card-body text-center"> some text <div class="collapse" id="example"> the extra text </div> <a data-toggle='collapse' href='#example' id='collapseExample1' class='card-link'>Show more</a> </div> </div> </div> <div class="col-4"> <div class="card"> <div class="card-body text-center"> some text <div class="collapse" id="example2"> the extra text </div> <a data-toggle='collapse' href='#example2' id='collapseExample2' class='card-link'>Show more</a> </div> </div> </div> <div class="col-4"> <div class="card"> <div class="card-body text-center"> some text <div class="collapse" id="example3"> the extra text </div> <a data-toggle='collapse' href='#example3' id='collapseExample3' class='card-link'>Show more</a> </div> </div> </div> <div class="col-4"> <div class="card"> <div class="card-body text-center"> some text <div class="collapse" id="example4"> the extra text </div> <a data-toggle='collapse' href='#example4' id='collapseExample4' class='card-link'>Show more</a> </div> </div> </div> </div>

Answer 2

Remove the double classes col-4 and card and instead nest them by puting each class on its own separate div as follows

<div class="col-4">
    <div class="card">
        <div class="card-body text-center">
            
        </div>
    </div>
</div>

.

<div class="d-flex justify-content-center">
<div class="col-4">
    <div class="card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example' id='collapseExample1' class='card-link'>Show
                more</a>
        </div>
    </div>
</div>
<div class="col-4">
    <div class="card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example2">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example2' id='collapseExample2' class='card-link'>Show
                more</a>
        </div>
    </div>
</div>
<div class="col-4">
    <div class="card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example3">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example3' id='collapseExample3' class='card-link'>Show
                more</a>
        </div>
    </div>
</div>
<div class="col-4">
    <div class="card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example4">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example4' id='collapseExample4' class='card-link'>Show
                more</a>
        </div>
    </div>
</div>