Center image in bootstrap

I am struggling with how to center an image using Bootstrap. I have made the image responsive using img-responsive but can’t center it on the page. I have tried looking for different solutions but none seem to work.

My CodePen URL is see the large image that is on the left, I am trying to center it.

Thank you

Since you have loaded Bootstrap 4, you should take a look at the following documentation for aligning images.

You have not made the image responsive, because you are using Bootstrap 3 syntax and you have loaded Bootstrap 4 library into your project. If you want to use Bootstrap 4, then you will need to research which class does the same as Bootstrap 3’s .img-responsive.