👀 Views: 1430 💬 Answers: 1 📅 Created: 2025-06-03

css bootstrap-5 flexbox HTML

I need some guidance on I'm working on a personal project and I'm reviewing some code and Hey everyone, I'm running into an issue that's driving me crazy. I'm working with an scenario with vertical centering of flex items in a Bootstrap 5 layout that only occurs on smaller screens. I've set up a simple flex container, yet on devices with a width less than 576px, the items do not center as expected. My code looks like this: ```html <div class="container"> <div class="row justify-content-center align-items-center" style="height: 100vh;"> <div class="col-6"> <div class="card"> <div class="card-body"> <h5 class="card-title">Title</h5> <p class="card-text">Some quick example text.</p> </div> </div> </div> </div> </div> ``` My goal is to vertically center the card within the viewport. When I test it on larger screens, everything works fine, but on smaller screens, specifically when I resize the browser window or test on mobile, the card seems to push down towards the bottom of the screen instead of centering. I verified that the viewport height is sufficient, and the `height: 100vh` is applied correctly, but the alignment seems to unexpected result. I tried adding `min-height: 100vh;` to the `.row` class and experimented with using different alignment classes like `align-content-center` and `align-self-center`, but none have resolved the scenario. Would there be something specific to Bootstrap 5’s flexbox implementation or media queries that could affect this? Any help in identifying what's going wrong would be greatly appreciated. I'm working on a service that needs to handle this. Has anyone else encountered this? Thanks for your help in advance! My team is using Html for this REST API. Am I missing something obvious?