How do I align and resize my text and picture on the same level vertically?

Trying to complete a tutorial task here

And I can not align my text and picture the way as the sample page

My text appears to be on the top of the box while the image is (?) too large(?)

What I have tried so far:
for the whole box: <div class="row" style="background-color:grey">
then the left part the text has <div class="col-md-8" style="text-align:center; vertical-align:middle;">
The image part has <div class="col-md-4" style="text-align:center; vertical-align:middle; display:inline-block;">
<img src="" alt="image not available" class="img-responsive rounded-circle" >

so vertical-align:middle; didn’t solve the problem, image class img-responsive can only resize the image this size, not quite what I would like
and `display:inline-block’ is what I found on Google, but did not do anything for me

How can I make my section look likethis?

Can you post your Codepen url?

Hi thank you for the reply.
here’s theLINK

I’m very new to HTML so the page is full of improper alignment. :slight_smile:

It appears you had two versions of Bootstrap in your project. If you comment out the following and then use Bootstrap 4’s syntax for the rounded image to make it responsive with img-fluid instead of img-responsive, Ii think you will get closer to what you are wanting. I say closer, because on a mobile device the bottom text below the contact form is too far to the left.

<link href="//" rel="stylesheet"> 

thank you for the advice, I am not sure how I had two versions of Bootstrap haha!

the image didn’t change much in size still.
I wonder why it worked in this example here

But anyway I figured out a way to at least align my text to the center of box

Thank you for the help