Bootstrap Tutorial - Set carousel-caption








The following code shows how to set carousel-caption.

Example

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'
  src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
  href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css">
</head><!-- w w w  .  j a v  a2 s .  com-->
<body>
  <div id="myCarousel" class="carousel slide">
    <!-- slider -->
    <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>
    <div class="caption-block"></div>
    <div class="carousel-inner">
      <div class="active item">
        <!-- item 1 -->
        <img src="http://www.placehold.it/940x300" alt="">
        <div class="carousel-caption">
          <h4>Lorem ipsum dolor sit amet.</h4>
        </div>
      </div>
      <!-- end item -->
      <div class="item">
        <!-- item 2 -->
        <img src="http://www.placehold.it/940x300" alt="">
        <div class="carousel-caption">
          <h4>Title</h4>
          <p>Mollitia officia reiciendis excepturi temporibus quibusdam.</p>
        </div>
      </div>
      <!-- end item -->
      <div class="item">
        <!-- item 3 -->
        <img src="http://www.placehold.it/940x300" alt="">
        <div class="carousel-caption">
          <h4>Title</h4>
          <p>Quibusdam blanditiis.</p>
        </div>
      </div>
      <!-- end item -->
    </div>
    <!-- end carousel inner -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
  </div>
  <!-- end slider -->
</body>
</html>

Click to view the demo