Help with using Bootstrap Grid system

Hello everyone.

I’ve just finished my Tribute Page project (here: https://codepen.io/rainbow-rachel/pen/bMovvX)
and am beginning my Personal Portfolio Page. But I wanted to ask some questions before I dive into this next project.

For the Tribute Page, I tried numerous things to get the entire page to be “Skinnier”. I don’t like how big the photo gets when in Full Screen, and would like it to look more like the example, here: https://codepen.io/freeCodeCamp/full/NNvBQW/

I tried adjusting the photo size, but with using img-responsive I couldn’t get it to work.
I tried adjusting the width in “container-fluid” but that messed everything up.

I am thinking the solution has something to do with Bootstrap’s grid system. But I feel majorly confused on how to use that system.

With the grid system, how do you know when to use “xs, sm, md, lg, xl”… don’t we want our pages to look good on ALL SIZES of screens??

Any help with the bootstrap grid system would be greatly appreciated.

And if someone could look over my Tribute Page code and let me know if I’m even on the right track, before I being my next project, that would be wonderful.

Thanks in advance for any help!

Have a beautiful day