title: width carousel Bootstrap
body: <p>I have a carousel with bootstrap, I want the width 100% on the title of the picture. I tried this, but it doesnt works .carousel-caption {
    width : 500px;
  }</p>
  
  <pre><code>&lt;div id="myCarousel" class="carousel slide col-md-12" data-ride="carousel"&gt;
   &lt;ol class="carousel-indicators"&gt;
     &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
     &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
     &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
     &lt;li data-target="#myCarousel" data-slide-to="3"&gt;&lt;/li&gt;
     &lt;li data-target="#myCarousel" data-slide-to="4"&gt;&lt;/li&gt;
    &lt;/ol&gt;
   &lt;!-- Wrapper for slides --&gt;
   &lt;div id="divres"  class="carousel-inner peopleCarouselImg" role="listbox"&gt;
    &lt;div class="item active"&gt;
     &lt;a href="resultado.php"&gt;
     &lt;div&gt;
      &lt;img src="foto.png" alt="Chania"&gt;
       &lt;div class="carousel-caption"&gt;
        &lt;h1 class="img-rounded"&gt;EL MEJOR AUTO DEL MUNDO&lt;/h1&gt;
       &lt;/div&gt; 
     &lt;/div&gt; 
    &lt;/a&gt;     
  &lt;/div&gt;          
  &lt;/div&gt;
   &lt;!-- Left and right controls --&gt;
      &lt;a class="left carousel-control" href="#myCarousel" 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;Anterior&lt;/span&gt;
  &lt;/a&gt;
   &lt;a class="right carousel-control" href="#myCarousel" 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;Siguiente&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want 100% width</p>
  
  <p><a href="https://i.stack.imgur.com/hVDqf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hVDqf.png" alt="enter image description here"></a></p>
  
  <p>The CSS</p>
  
  <pre><code>.carousel-caption {
    background-color: black;
  }
  </code></pre>