I know this has probably been asked a million times. However, the basic explanation of the grid system doesn’t clarify things for me well. By viewing my project you should be able to see my problem. I have 3 rows of projects with headings and images, 3 per row (9 projects total) and I thought they were responsive until I tried viewing them from other computers.
Here is my codepen project: https://codepen.io/BadDuke/pen/PbWBjG
Note that the projects themselves are mostly just silly placeholders for now - especially their images.
How can I fix their responsiveness, and how does the grid system really work? The part I don’t understand is what I need to include to ensure similar display on all devices, and how the numbers for each class relate to the denoted size (eg. lg, xs…). That relationship is probably what confuses me the most.
There are other issues with my project such as the menu being invisible when collapsed, so if you feel like it, please let me know how to fix that or any other issues you find. The main thing for now though is the project rows.
I haven’t added a proper footer to the page yet, but that’s totally besides the point.
You will often see something like <div class="col-xs-12 col-sm-4" (for example). It means that we often decide to give an element the full width of the screen (12 col) on an extra small device.
Now a row always counts 12 columns. You can choose to use them the way you want. So if you set your div class= "col-sm-4" you have 8 columns left to play with.
If you want your 8 column- div to start (say) a little bit on the right and not right from the side of the container, you need to offset it. So you’ll have div class="col-xs-12 col-sm-4 col-sm-offset-3").
This means your 8-column div will start 3 columns to the right.
I think you could have a look into flexbox - very easy to use.
PS I think you’re not supposed to have similar display across devices : it’s impossible and the devices don’t have the same proportions. So for example a div will take the full width of the an extra small screen (col-xs-12) and it will look fine, but on a larger screen you want it to occupy a third (for example) (so col-sm-4).
Yeah I understand that the display changes for each device, I should have been clear about that. But basically my problem is that if I switch to my MacBook, for example, the positioning of the project images gets really screwy. I know responsiveness is about changing layout to best fit the screen, but it’s supposed to be graceful and look good, whereas currently mine just becomes a horrible mess.
Should I just play with it until it works on every device size (works, as in isn’t ugly)? Or do you know a quick fix?
When would you say is it appropriate to use flex over grid? (Just basing my question off of the intro bit I read in that link).
I do want to make sure I understand the grid system well though, as this seems like a vital part of learning to use Bootstrap well. I still don’t fully understand, but I’m sure the light bulb will flash soon. If only there were some kind of infographic or diagram about it, showing certain grid-based classes being used and their respective effects on different screen sizes. Viewing all of that at the same time for each screen size would do the trick. SO far, I just get that there are 12 columns, you can offset so that things don’t have to come right next column-wise, and I am assuming an “sm” class only has any effect on sm screen sizes?
Okay here’s a more clear question in addition to the general and other questions so far: does a class with “sm” (small) in its name among the Bootstrap grid classes have any contribution to the positioning of items when viewed on a screen size that’s not of the “small”/“sm” sort? I am… I am confused, especially because if they DO affect all sizes, I totally don’t understand anything, and if they DON’T, then wouldn’t I have to use tons of classes for each div to prepare them for each screen size?
Thus, I am guessing they DO have an effect on each screen size, eg. col-xs-12 affects more than just xs screens. Anyway, that’s where my brain implodes.