Twitter Bootstrap Carousel Full Markup Example

I really like Twitter Bootstrap but I’ve noticed that their example page only shows minimal markup for some of the more exciting features, leaving out little details like the “carousel-caption” class that I had to use view source to find.

If you were looking for how they do their clever captions at the bottom of each carousel image, look no further.

Since the carousel may or may not play automatically I recommend triggering it with Javascript, live example here.

Below is the full markup of a Twitter Bootstrap Carousel

<div class="container">
    <div class="row">
        <div class="span12">
            
            <div id="myCarousel" class="carousel slide">
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class=""></li>
                    <li data-target="#myCarousel" data-slide-to="1" class=""></li>
                    <li data-target="#myCarousel" data-slide-to="2" class="active"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="http://mattlockyer.com/wp-content/uploads/2011/11/Example8-720.jpg" alt="http://www.mattlockyer.com">
                        <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">
                        <img src="http://mattlockyer.com/wp-content/uploads/2011/11/Desktop2.jpg" alt="http://www.mattlockyer.com">
                        <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">
                        <img src="http://mattlockyer.com/wp-content/uploads/2011/11/tree.jpg" alt="http://www.mattlockyer.com">
                        <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>
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
            </div>
        </div>
    </div>
</div>

Enjoy!

This entry was posted in Bootstrap, Code. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

One Comment

  1. Nastya
    Posted October 20, 2013 at 2:39 am | Permalink

    Thank you!

One Trackback

  • […] As seems to be the custom with many blogs I wanted a slider on my homepage, predominantly to showcase any photographs I take in future. This was a really useful article by Matt Lockyer on setting up Bootstrap Carousel. […]

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*
*