I am trying to use bootstrap as much as possible for my tribute page. I have added the img-responsive class to my image but it doesn’t resize when I make my page smaller. I have also tried img-circle and img-rounded but they don’t work either. However, strangely, img-thumbnail does work. Here is the complete html for my page.
<link href="https://fonts.googleapis.com/css?family=New+Rocker" rel="stylesheet">
<div class="container-fluid">
<div class="row">
<div id="container" class="col-xs-12">
<header class="text-center text-primary">
<h1>Hack Wanger</h1>
<h2>A Tribute</h2>
</header>
<figure>
<img class="img-responsive center-block" src="http://pearlhq.com.au/wp-content/forum/uploads/2015/01/EGN_HAK_WANGER.jpg" alt="Hack Wanger portrait"/>
<figcaption>Hack Wanger with his trademark guitar god pose</figcaption>
</figure>
<h3>Here are a few things you didn't know about Hack:</h3>
<ul>
<li>His real name is David Loader</li>
<li>His TV show, "Guitar Gods and Masterpieces" has been broadcasting on Channel 31 since 2010 and has run for 300 episodes</li>
<li>He hosts the only guitar TV show in the world</li>
<li>He had no background in film or TV befire starting the show</li>
</ul>
<blockquote>
<p>I have been passionate about music, and playing the guitar, for as long as I can remember...</p>
<footer>Hank Wanger in an interview with <cite>Pearl HQ</cite></footer>
</blockquote>
<p>Find out about Hack's campaign to raise money for prostate cancer and depression through <a href="https://www.epicguitarsolo.com/">The Epic Guitar Solo Challenge.</a></p>
</div>
</div>
</div>
Any help appreciated: