👀 Views: 15 💬 Answers: 1 📅 Created: 2025-06-16

css bootstrap flexbox HTML/CSS

I'm relatively new to this, so bear with me... I'm a bit lost with I'm working on a project and hit a roadblock... I'm having trouble getting my flex items to wrap properly inside a Bootstrap card component. I'm using Bootstrap v5.1 and I've set up a simple flex layout for a card that contains several images and text descriptions. Instead of wrapping, the items are overflowing the card's boundaries, causing layout issues on smaller screens. I've defined my card and flex container like this: ```html <div class="card" style="width: 18rem;"> <div class="card-body"> <div class="d-flex flex-wrap"> <div class="p-2"><img src="image1.jpg" alt="Image 1" class="img-fluid"></div> <div class="p-2"><img src="image2.jpg" alt="Image 2" class="img-fluid"></div> <div class="p-2"><img src="image3.jpg" alt="Image 3" class="img-fluid"></div> <div class="p-2"><img src="image4.jpg" alt="Image 4" class="img-fluid"></div> </div> </div> </div> ``` I’ve also tried adding `flex-wrap: wrap;` explicitly in my CSS, but it doesn't seem to have any effect. Here’s the CSS I added: ```css .d-flex { display: flex; flex-wrap: wrap; } ``` In the browser, I notice that the card body becomes scrollable instead of resizing to fit the content. I've inspected the elements and noticed that the card itself has a fixed height. Could this be causing the scenario, or is there something wrong with my flexbox implementation? Any help would be appreciated! Any help would be greatly appreciated! This issue appeared after updating to Html/Css 3.10. Is there a simpler solution I'm overlooking?