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

HTML-CSS
#1 
<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.

Screenshot(3)
Screenshot(3)1279×673 308 KB

#2

Can you post a link to your Codepen, so we can take a look at all of your code and Codepen settings?

It will make it easier to give you the best answer.

#3

If it helps.
Codepen link

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

#4

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">
#5

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

#6

Yes, the text-center class centered the image for you.

1 Like
#7