title: How to make carousel caption in Bootstrap responsive?
body: <p>I have been trying to make my carousel in Bootstrap 3.2 responsive. But I just can't seem to get my caption to resize with the image in my carousel. I think it has to do with the "item" class and how it doesn't resize with the browser. I think it might have to do with <code>@media</code>, but if it does, I don't know what to put there.</p>
  
  <p><a href="http://imgur.com/a/yzIF9" rel="nofollow">Here is what's going on.</a></p>
  
  <p>Here is my basic HTML carousel slide:</p>
  
  <pre><code>&lt;div class="item"&gt;
      &lt;img src="http://goo.gl/PK4Kkh" alt="Third Slide"&gt;
      &lt;div class="carousel-caption"&gt;
          &lt;h1&gt;Test&lt;/h1&gt;
          &lt;p&gt;Test&lt;/p&gt;
          &lt;p&gt;&lt;a class="btn btn-lg btn-primary" href="#button3" role="button"&gt;Button 3&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt; &lt;!-- End of Carousel Caption --&gt;
  &lt;/div&gt; &lt;!-- End of Item --&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>.carousel
  {
      height: 720px;
      margin-bottom: 0px;
  }
  
  .carousel-caption
  {
      z-index: 10;
  }
  
  .carousel .item
  {
      height: 720px;
      background-color: #777;
  }
  
  .carousel-inner &gt; .item &gt; img
  {
      position: absolute;
          top: 51px;
          left: 0;
      min-width: 100%;
  }
  </code></pre>