title: twitter bootstrap carousel caption not matching photo width
body: <p>I have the Twitter Bootstrap carousel working quite well for the most part but my photos are of different widths and the caption on the bottom matches the widest width so when I have photos with less width the caption stays black for the previous width and looks a little unprofessional.  My code is as follows and I was wondering if there is any way to fix this problem so the width always matches the photo.</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="span8 offset2"&gt;
              &lt;div id="myCarousel" class="carousel slide"&gt;
  
                    &lt;div class="carousel-inner"&gt;
  
                   &lt;!-- here I loop through and add a bunch of photos --&gt;
                    {% for photo in record_photos %}
  
                      &lt;div class="active item"&gt;
                          &lt;a href="/url"&gt;&lt;img src="some-src"&gt;&lt;/a&gt;
                          &lt;div class="carousel-caption"&gt;
                              &lt;h3 class="center-it"&gt;some caption&lt;/h3&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                     {% endfor %}
  
                    &lt;/div&gt;
  
                    &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
                    &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>