title: Bootstrap carousel caption
body: <p>I am implement carousel using below code. In this i want two caption as per carousel slide. So i will add one more caption div but it's not working properly.I need one caption for top left corner of the carousel another one bottom of the carousel. I am not aware of css so please help anyone.</p>
  
  <pre><code>&lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
  &lt;!-- Indicators --&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;/ol&gt;
  &lt;!-- Wrapper for slides --&gt;
  &lt;div class="carousel-inner"&gt;
    &lt;div class="item active"&gt;
      &lt;img src="la.jpg" alt="Los Angeles" style="width:100%;"&gt;
      &lt;div class="carousel-caption"&gt;
        &lt;h3&gt;Los Angeles&lt;/h3&gt;
        &lt;p&gt;LA is always so much fun!&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;img src="chicago.jpg" alt="Chicago" style="width:100%;"&gt;
      &lt;div class="carousel-caption"&gt;
        &lt;h3&gt;Chicago&lt;/h3&gt;
        &lt;p&gt;Thank you, Chicago!&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Left and right controls --&gt;
  &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;
    &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
    &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
  &lt;/a&gt;
  &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;
    &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
    &lt;span class="sr-only"&gt;Next&lt;/span&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>
  </p>