How to create bootstrap slider with text

Question

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?

HTML Code

<section id="slider">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
  <img src="images/slider/1.jpg" >
  <div class="carousel-caption">
    <div class="pull-left details">
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget.</p>
    </div>
  </div>
 </div>

<div class="item">
  <img src="images/slider/2.jpg" >
  <div class="carousel-caption">
    <h3>Chania</h3>
    <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
  </div>
</div>

<div class="item">
  <img src="images/slider/3.jpg" >
  <div class="carousel-caption">
    <h3>Flowers</h3>
    <p>Beatiful flowers in Kolymbari, Crete.</p>
  </div>
</div>


 <!-- Left and right controls -->
 <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
   <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
 </a>
</div>  
</div>
</div>
</div>
</div>
</section>

Answer 1

Check this code below, I have added a comment in the code, where you can change the darkness over the image.

 /* darken the control area */

.carousel .carousel-control {
  opacity: 1
}
.carousel .carousel-control.left {
  background-image: linear-gradient(to right, rgb(0, 0, 0) 0, rgba(0, 0, 0, 0) 100%);
}
.carousel .carousel-control.right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgb(0, 0, 0) 100%);
}


 /* add darkness over the image */
.item {
  position: relative
}
.item:before {
  content: '';
  background: rgba(0, 0, 0, 0.2);
  /* change this value from 0.1 to 1; */
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section id="slider">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="https://2.bp.blogspot.com/-qq-NOKmEBKY/Vu62cHdKiCI/AAAAAAAADdQ/0ehpnueSCYgC0apw26k_N5U9-tXgNenXw/s1600/Finding_Dory_3.jpg" class="center-block img-responsive" alt="">
              <div class="carousel-caption">
                <div class="pull-left details">
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget.</p>
                </div>
              </div>
            </div>

            <div class="item">
              <img src="http://www.killermoviereviews.com/wp-content/uploads/FindingNemoMarlinDorry.jpg" class="center-block img-responsive" alt="">
              <div class="carousel-caption">
                <h3>Chania</h3>
                <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
              </div>
            </div>

            <div class="item">
              <img src="https://2.bp.blogspot.com/-CFmCdgEVXI8/Vu62aODejkI/AAAAAAAADdE/rZU_i432umYxHYJvPnFXIIcQ7I1krzIOg/s1600/Finding_Dory_2.jpg" class="center-block img-responsive" alt="">
              <div class="carousel-caption">
                <h3>Flowers</h3>
                <p>Beatiful flowers in Kolymbari, Crete.</p>
              </div>
            </div>


            <!-- Left and right controls -->
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>