title: How can I make a Bootstrap carousel caption stretch the full width of the carousel?
body: <p>I have a carousel that's the full width of the page. Now I need to make the carousel-caption the full width of the page as well with a yellow background. The background should be the full width of the page, but the actual caption text should be centered.</p>
  
  <p>This is what it should look like:</p>
  
  <p><img src="https://i.stack.imgur.com/NEsft.png" alt="This is what it should look like."></p>
  
  <p>This is what it looks like now:</p>
  
  <p><img src="https://i.stack.imgur.com/xZ4lC.png" alt="This is what it looks like now."></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!--START CAROUSEL--&gt;
  &lt;div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"&gt;
    &lt;!-- Wrapper for slides --&gt;
    &lt;div class="carousel-inner" role="listbox"&gt;
      &lt;div class="item active"&gt;
        &lt;img src="../../images/LD/desktop_hero1.png" alt="..."&gt;
        &lt;div class="carousel-caption"&gt;
          Text for caption 1 here.
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img src="../../images/LD/desktop_hero2.png" alt="..."&gt;
        &lt;div class="carousel-caption"&gt;
          Text for caption 2 here.
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img src="../../images/LD/desktop_hero3.png" alt="..."&gt;
        &lt;div class="carousel-caption"&gt;
          Text for caption 3 here.
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Controls --&gt;
    &lt;a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"&gt;
      &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"&gt;
      &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;       
  &lt;!--END CAROUSEL--&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      .carousel-caption {
       max-width: 100%;
       width:100%;
       background-color: #ffb81c;
      }
  &lt;/style&gt;
  </code></pre>