How to make Bootstrap's card component responsive to viewport height?
I'm trying to use Bootstrap 5.3 to create a responsive card layout that adjusts its height based on the viewport height. However, when I set the card's height to 100vh, it works fine on large screens, but on smaller devices, the card extends beyond the viewport, causing layout issues. I initially tried using CSS with the class `.h-100` for height but that didn't give me the desired effect. Here’s the code snippet I have: ```html <div class="container"> <div class="row"> <div class="col-md-6"> <div class="card" style="height: 100vh;"> <div class="card-body"> <h5 class="card-title">Card Title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> </div> </div> ``` When I resize the browser window to mobile dimensions, the card grows taller than the viewport, and I see unwanted scroll bars. I also tried adding `overflow: hidden;` to the card's CSS, but that didn't help either. I’m looking for a way to ensure that the card always fits within the viewport height across all devices without breaking the layout. Any suggestions for achieving this in Bootstrap?