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/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: