title: Bootstrap align caption relative to image width not the container
body: <p>I'm trying to list some images, and for each image I want to have a caption, with some details, let's say the title, the problem right now is that the width of the caption is relative to the parent div which is normal, but I want it to be relative to the image width, but since I have the class <code>img-responsive</code> on the img I don't know how to achive this. Maybe you guys can help me out.</p>
  
  <p>Here is a live example: <a href="http://jsbin.com/cudugize/1/edit?html,css,output" rel="nofollow">http://jsbin.com/cudugize/1/edit?html,css,output</a></p>
  
  <p>Here is the code</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;div class="col-sm-3 col-xs-6 col-md-2 col-lg-3"&gt;
    &lt;div class="thumbnail"&gt;
    &lt;a href="url"&gt;&lt;img width="139" height="161" src="http://lorempixel.com/139/161/nightlife/" class="img-responsive" alt="..."&gt;&lt;/a&gt;
    &lt;div class="caption img-responsive"&gt;
    &lt;h4 class="text-center"&gt;&lt;a href="url" title="title" class="homepage anchorhead text-uppercase"&gt;Nice title&lt;/a&gt;&lt;/h4&gt;
    &lt;p class="text-center"&gt;&lt;a href="#" class="homepage city text-uppercase"&gt;&lt;span class="glyphicon glyphicon-globe"&gt;&lt;/span&gt; usa&lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="thumbnail"&gt;
    &lt;a href="url"&gt;&lt;img width="139" height="161" src="http://lorempixel.com/139/161/nightlife/" class="img-responsive" alt="..."&gt;&lt;/a&gt;
    &lt;div class="caption img-responsive"&gt;
    &lt;h4 class="text-center"&gt;&lt;a href="url" title="title" class="homepage anchorhead text-uppercase"&gt;Nice title&lt;/a&gt;&lt;/h4&gt;
    &lt;p class="text-center"&gt;&lt;a href="#" class="homepage city text-uppercase"&gt;&lt;span class="glyphicon glyphicon-globe"&gt;&lt;/span&gt; usa&lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>Aditional bootstrap core css
  
  .thumbnail{
  position: relative;
  width: 100%;
  border: none !important;
  }
  .thumbnail .caption{
    position: absolute;
  bottom: 0px;
  background: rgba(0,0,0,0.50);
  width: 100%;
  padding: 0px !important;
  }
  </code></pre>