I just built a new site from scratch using Bootstrap 4. I created a fluid container, then into that I inserted a Grid Row with 8 columns, and into each of these 8 columns I inserted a card with images.
Everything looked fine until I realized that it isn’t responsive. In fact at xl the cards display at 4 in a row, but at lg the cards all stack vertically as if viewing on a phone.
Try as I might, I can’t get the cards to be responsive no matter how much I play with the col classes.
Can someone help me to get this thing responsive? Basically I’d like the cards 4 across at xl (that’s what they’re doing now), 3 across at lg, and 2 across at md, sm, and xs. Again, right now it’s displaying at 4 across at xl and only 1 across (stacking vertically) at all other sizes.
This is my first time here and hopefully after I type this I can include some code. Much appreciated.
That would certainly help - either that or a link to a live page where we can see the issue.
When you post code on the forums, you need to format it so it will display correctly. You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.
You’d need to set the column classes appropriately.
e.g. To go from 4 across down to one across you would use the classes like this.
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
Column classes indicate the number of columns you like which is based on a grid of 12 columns. Therefore -12 spans 12 columns meaning one item per row. sm-6 says span 6 columns (i.e. 2 per row) for the small breakpoint.
Read through the grid documentation again and it will begin to come clear. I had to read it a few times before it clicked
Here’s a codepen you can fork and play around with and goes from 4 columns down to one column. If you want the smallest to be 2 columns instead of one like the codepen then change the col-12 to col-6.
Thanks, guys, for the help. I’m dealing with a kidney stone (not my first) and I will dig into all your help and great advice a bit later and report back.
Thanks, PaulOB, your solution worked like a charm. I have a better understanding now how the grid works. I applied your advice to the column and it worked perfectly. I greatly appreciate the info.
