[Solved] Help With Image Overflowing in img-thumbnail bootstrap

<div class="text-center">
<div class="img-thumbnail image">
  <img src="https://i.ytimg.com/vi/X6yM6HLADbE/maxresdefault.jpg" alt="fela kuti" class="img-responsive">
  <p>Fela Kuti's typical stage perfromance attire</p>
    </div>
  </div>

I’m finding it difficult to make the image fit into the thumbnail. Its always overflow out of the box. Is there a way too resize the image to fit the box with css or anything. I’m not really good with the question, I hope you understand what I’m trying to ask.

If it helps.
Codepen link

And I need help centering the image also, margin: 0px auto; dont seem to work.

You are using Bootstrap 4 in your Codpen settings, but you are using Bootstrap 3 syntax for making your images responsive. Replace img-responsive in the img tag below with img-fluid and your image will be responsive as the page width shrinks.

<img src="https://i.ytimg.com/vi/X6yM6HLADbE/maxresdefault.jpg" alt="fela kuti" class="img-responsive">

Thank you very much @camperextraordinaire. It worked. I’d just like to know how I was able to center the image. Was it with the text-center class?