Help understanding syntax with bootstrap: Build a Tribute Page

I am currently working on “Build a Tribute Page” on FCC. I am observing the example’s HTML code and how it works with the Bootstrap CSS classes. I am having trouble understanding how responsive design works exactly. I’m currently throwing things at the wall to see what sticks, but I’m a bit tripped up by this bit of the tribute example:

I have a bit of an idea on how this class works, but I am confused on how the placement itself is decided. Do the columns stretch vertically based on what you need? How do I decide what is right for each col-*? Is it simply trial and error? Is there a way for me to be able to see each col and how much space it takes up?

Is there a program that will allow me to see how things would look if viewed on a tablet or phone?

Finally, what is the proper way to use col-lg-*? It seems it’s meant for larger computer screens, but I am unsure how the browser would know the difference between a lg browser and a md browser. If that makes any sense :confused:

Thanks in advance for any help given!

Pretty much, yes.

Chrome and Firefox have tools for responsive design.

What really counts here is the size of the viewport (usually the size of the browser window). You can shrink your browser and see the col-sm and col-xs classes kick in, and enlarge it (even beyond the size of your screen) to see col-lg in action. Again, you can emulate different screen sizes using your browser’s dev tools.

1 Like

This is pretty much what I was looking for! Thanks!