How to fit my image in thumbnail?

Above is the link to my freecode camp first project.As you can see in thumbnail there is lot of white space in left and right.I want to reduce that.

You can add style="width:100%;" to your img html element.

Check this out for more info:

is there any bootstrap class for that

There is; you can use class="img-responsive"

Thanks! Your previous solution is working very well.But your second soln class=“img-responsive” is not working.

In future if you find any bootstrap solution regarding this problem than please inform me.Thanks in advance!

You can try containing the thumbnail in an offset column, like

<div class="col-md-6 col-md-offset-3">
  <div class="thumbnail">
    <!-- ... -->
1 Like

img-responsive is working fine for me in Chrome, but apparently not in Firefox… perhaps it’s a browser issue on your end.

Either way, I think width:100% should serve your needs fine.

1 Like

I inspected .img-responsive in Bootstrap’s CSS and found that it doesn’t touch width, but sets max-width to 100%.

@kevcomedia You can always overwrite the .img-responsive bootstrap’s class.

.img-responsive {
    width: 100%;

This worked but as expected it drastically reduced size of image.But this was good logical soln

You’re right. col-md-6 is too small. I played around and found that you can go as far as col-md-10 col-md-offset-1 without the extra space showing up.