title: How to create bootstrap slider with text
body: <p><a href="https://i.stack.imgur.com/3Gw49.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3Gw49.jpg" alt="enter image description here"></a></p>
  
  <p>I want bootstrap slider like the image. I have the default bootstrap slider style but cannot type text like the above image and a black transparent black background. Is it possible to do it in bootstrap slider?</p>
  
  <p>HTML Code</p>
  
  <pre><code>&lt;section id="slider"&gt;
  &lt;div class="container"&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-md-12"&gt;
  &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;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
  &lt;/ol&gt;
  
  &lt;!-- Wrapper for slides --&gt;
  &lt;div class="carousel-inner" role="listbox"&gt;
  &lt;div class="item active"&gt;
    &lt;img src="images/slider/1.jpg" &gt;
    &lt;div class="carousel-caption"&gt;
      &lt;div class="pull-left details"&gt;
          &lt;p&gt;Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  
  &lt;div class="item"&gt;
    &lt;img src="images/slider/2.jpg" &gt;
    &lt;div class="carousel-caption"&gt;
      &lt;h3&gt;Chania&lt;/h3&gt;
      &lt;p&gt;The atmosphere in Chania has a touch of Florence and Venice.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="item"&gt;
    &lt;img src="images/slider/3.jpg" &gt;
    &lt;div class="carousel-caption"&gt;
      &lt;h3&gt;Flowers&lt;/h3&gt;
      &lt;p&gt;Beatiful flowers in Kolymbari, Crete.&lt;/p&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;Previous&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;Next&lt;/span&gt;
   &lt;/a&gt;
  &lt;/div&gt;  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>