I don't Understand the project syntax

I’ve finished my first project “the tribute page” and it’s working and all but when I opened the free code example code I couldn’t understand that marked code … why have they put more than one grid I don’t get it at all

They are for the different screen sizes. In this case the div will span 12 columns on extra small (xs) screens, 10 on small (sm) screens, and 8 on medium sized (md) screens.

1 Like

So in Bootstrap those classes are applied depending on the screen size.

The div in question will take up 12 columns when the screen is xs (small mobile phone screen? not sure actual pixel dimensions).

When the screen is sm (prob regular smartphone sized screen) the div in question will take up 10 columns but also be offset one column on either side. Ie. A blank column , then the div for 10 columns, then another blank column.

etc etc.

Hope this helps

1 Like

Yeah It totally helps … I got it thanks … but I still have one question … if I am displaying the website on a medium screen (like a laptop) and I wrote in my code what the laptop gonna do since it is a medium screen and I wrote a code for an extra small screen