Jump to: navigation, search

Bootstrapskin Carousel

Carousel

Bootstrap Carousel

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Read More

Bootstrap Carousel

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Read More
      <div class="col-md-8">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="item">
              <div class="">http://megamenu.sourceforge.net/images/Third.jpg</div>
              <div class="carousel-caption">
                <h4>First Thumbnail label</h4>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at
                eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              </div>
            </div>
            <div class="item active">
              <div class="">http://megamenu.sourceforge.net/images/Third.jpg</div>
              <div class="carousel-caption">
                <h4>Second Thumbnail label</h4>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at
                eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              </div>
            </div>
            <div class="item">
              <div class="">http://megamenu.sourceforge.net/images/Third.jpg</div>
              <div class="carousel-caption">
                <h4>Third Thumbnail label</h4>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at
                eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              </div>
            </div>
          </div>
        </div>
      </div>

Take care to use the correct column class otherwise you will experience issues with the slides not rendering correctly. This will differ dependant on the images you are displaying in the carousel. You will probably need to try different sizes to get the perfect balance.

As with other aspects of Bootstrap there is plenty of scope to add other features to the caption, e.g. buttons and icons etc.

You might also consider using popup images (Modal Functionality) to display images.

bootstrapskin-commercial-skin.png