Bootstrap 4 is still new to me, and I haven't had much experience working with Bootstrap 3 either.
One issue I've encountered is that when I apply the class col-(breakpoint)-(span) to div elements, they don't automatically align in a single row or adjust based on the window width. Instead, they stack on top of each other and remain left-aligned. To solve this, I added the CSS flex property to the parent container, which worked perfectly.
However, I'm now facing a new challenge. Even though I have assigned classes according to the Bootstrap 4 grid system to make the containers wrap according to the window size, they are not wrapping to the next row as I expected. Instead, the combined width of the flex-items exceeds the window width, causing horizontal scrolling.
What I really need is for the first two containers to stay in one row, and for the last two containers to wrap to another row on smaller screens, such as phone portrait mode (<576px).
<div style="display:flex;">
<div class="col-sm-3 col-6"></div>
<div class="col-sm-3 col-6"></div>
<div class="col-sm-3 col-6"></div>
<div class="col-sm-3 col-6"></div>
</div>
Can anyone help me figure out where I'm going wrong?