Img-responsive not working on my Tribute page

1

Hi fellow campers

I’ve just started working on my Tribute page and I have already gotten stuck.
The image won’t scale or align even though I’ve use the img-responsive class .

Please help .
Here is my code:

    <div  class="conatiner">

  <h1 class="text-center ">Kailash Satyarthi</h1>


  <div>
<img src="http://en.prothom-alo.com/contents/cache/images/650x0x1/forum/uploads/media/2014/10/10/650xNxc411c900ab5667c04fd59c2ebba    d5f3c-koilash-1.gif.pagespeed.ic.-jvInuPEGt.jpg" class="img-responsive center-block">
  </div>

</div>
2

You could handle it like this:

img {
	width: 50%;
	display: block;
	margin: 0 auto;
}
3

container not conatiner

4

@ksjazzguitar That worked , thank you . But I wanted to write my code without any custom CSS.,like it showed in the video . Where did I go wrong ?

5

Thanks for pointing that out . I have corrected it but still the img-responsive class is not working the way it is supposed to

6

If you’re on codepen, they use version 4 and it doesn’t use img-responsive.
However, give the image the class img-fluid and in your css give your images
max-width: 100%; and height: auto;

Reference: https://v4-alpha.getbootstrap.com/content/images/

2 Likes
7

Yeah, I don’t know how many times I’ve been bitten in the ass by a misspeling.

8

“misspelling” is the correct spelling. I had to point that out because it was ironic.

9

are you sure that you loaded bootstrap 3 and not 4
YOU CAN USE

BOOTSTRAP 3

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css

BOOTSRAP 4

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css