I am using the following code to achieve a three-column design with a read more button. I changed the columns to display:flex to make them the same height. It looks fine when in default state. When you open a read-more option though, the other buttons shift too. Is there a possibility to prevent the buttons from shifting?
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- make cards same height -->
<section id="cards" class="py-5 bg-white">
<div class="container">
<div class="row">
<!-- diplay cards as flexbox, direction column and space between -->
<div class="col-12 col-sm-4 d-flex flex-column justify-content-between">
<!-- wrap text in a div -->
<div>
<h1>Shootings</h1>
<p>Willkommen bei den ganzen tollen Elementen</p>
<div class="collapse mb-3" id="collapseWidthExample1">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
<!-- wrap button in a div -->
<div>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample1" aria-expanded="false" aria-controls="collapseWidthExample">Read more</button>
</div>
</div>
<div class="col-12 col-sm-4 d-flex flex-column justify-content-between">
<div>
<h1>Shootings</h1>
<p>Willkommen bei den ganzen tollen Elementen. Willkommen bei den ganzen tollen Elementen.</p>
<div class="collapse mb-3" id="collapseWidthExample2">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
<div>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample2" aria-expanded="false" aria-controls="collapseWidthExample">Read more</button>
</div>
</div>
<div class="col-12 col-sm-4 d-flex flex-column justify-content-between">
<div>
<h1>Shootings</h1>
<p>Willkommen bei den ganzen tollen Elementen
<div class="collapse mb-3" id="collapseWidthExample3">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</p>
</div>
<div>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample3" aria-expanded="false" aria-controls="collapseWidthExample">Read more</button>
</div>
</div>
</div>
</div>
</section>