Bootstrap 5 flex utilities not aligning items as expected in a responsive grid
I'm sure I'm missing something obvious here, but Quick question that's been bugging me - I've been struggling with this for a few days now and could really use some help. I'm working on a responsive layout using Bootstrap 5 and I’m having trouble aligning items within a flex container. I have a grid of cards that I want to center within their container, but they are not aligning correctly at smaller screen sizes. Here’s a simplified version of my code: ```html <div class="container"> <div class="row justify-content-center"> <div class="col-12 col-md-6 col-lg-4 mb-4"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card 1</h5> <p class="card-text">Some quick example text.</p> </div> </div> </div> <div class="col-12 col-md-6 col-lg-4 mb-4"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card 2</h5> <p class="card-text">Some quick example text.</p> </div> </div> </div> </div> </div> ``` I’m using the `justify-content-center` class to center the cards in the row, but on smaller screens (like mobile), I notice that they are not centered as I expected. Instead, they seem to be aligned to the start of the container. I tried adding `text-center` to the cards and also changing the column sizes, but that didn’t help. Here’s what I see in the browser when the screen size shrinks: - The two cards stack on top of each other, which is expected, but they do not center; they align to the left. I’ve also verified that I’m correctly including the Bootstrap CSS and JS files in my project, version 5.1.3. Is there something I’m missing in my implementation, or is there a known issue with Bootstrap’s flex utilities at different breakpoints? Any advice on how to center these cards properly at all screen sizes would be appreciated. Any help would be greatly appreciated! My development environment is macOS. The stack includes Html and several other technologies. How would you solve this?