title: Bootstrap 3: Figcaption inside Figure
body: <p>I'm trying to create figures that contain an image and a caption which contains the title, a description and a progress bar.</p>
  
  <p>They look like this</p>
  
  <pre><code>&lt;figure class="col-sm-6 item game"&gt;
  
      &lt;a href="item.html"&gt;&lt;img src="http://placehold.it/440x250&amp;text=440x250+Game" class="img-responsive" alt="Game"&gt;&lt;/a&gt;
  
        &lt;!-- Item Hover Options --&gt;
        &lt;figcaption&gt;
          &lt;!-- Item Title --&gt;
          &lt;h1&gt;Game Title&lt;/h1&gt;
          &lt;!-- Item Description --&gt;
          &lt;p&gt;Game Description&lt;/p&gt;
          &lt;!-- Item Progress --&gt;
          &lt;div class="progress progress-striped"&gt;
            &lt;div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"&gt;
              &lt;span class="sr-only"&gt;20% Complete&lt;/span&gt;
            &lt;/div&gt;&lt;!-- END progress bar --&gt;
          &lt;/div&gt;&lt;!-- END progress div --&gt;
  
        &lt;/figcaption&gt;
  
      &lt;/figure&gt;
  </code></pre>
  
  <p>The problem I am having is that when the browser in resized to mobile view the figcaption does not resize as well...</p>
  
  <p>This is a fiddle of what I have so far: <a href="http://jsfiddle.net/DK76P/1/" rel="nofollow">http://jsfiddle.net/DK76P/1/</a></p>
  
  <p>As you will see when you resize the preview box, the caption does not resize accordingly...</p>
  
  <p>Any help is much appreciated :)</p>