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

HTML-CSS
1

Trying to complete a tutorial task here

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

23%20PM
23%20PM2704×756 258 KB

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="https://scontent.fybz2-2.fna.fbcdn.net/v/t1.0-9/29570513_1868306103202881_9176477575060728400_n.jpg?_nc_cat=0&oh=f72e098edf8e4b8972308447d82e335c&oe=5BC2861C" 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?

3

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:

5

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