Help understanding syntax with bootstrap: Build a Tribute Page

[xbot668]

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

Thanks in advance for any help given!

[kevcomedia]

@xbot668

Do the columns stretch vertically based on what you need?

Pretty much, yes.

@xbot668

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

Chrome and Firefox have tools for responsive design.

@xbot668

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

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.

[xbot668]

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