Carousel with Thumbnails in Bootstrap 3.0

Martín picture Martín · Sep 17, 2013 · Viewed 126.5k times · Source

I need to make Bootstrap 3.0 Carousel to display a slide of thumbnails. How can I do this? This is an image of what I´m looking for:

Bootstrap 3.0 Carousel Thumbs

This is a working example for Bootstrap 2, but I need this for Bootstrap 3.0.: Bootstrap Thumbnail Slider

Answer

Zim picture Zim · Sep 17, 2013

Bootstrap 4 (update 2019)

A multi-item carousel can be accomplished in several ways as explained here. Another option is to use separate thumbnails to navigate the carousel slides.

Bootstrap 3 (original answer)

This can be done using the grid inside each carousel item.

       <div id="myCarousel" class="carousel slide">
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="row">
                            <div class="col-sm-3">..
                            </div>
                            <div class="col-sm-3">..
                            </div>
                            <div class="col-sm-3">..
                            </div>
                            <div class="col-sm-3">..
                            </div>
                        </div>
                        <!--/row-->
                    </div>
                    ...add more item(s)
                 </div>
        </div>

Demo example thumbnail slider using the carousel:
http://www.bootply.com/81478

Another example with carousel indicators as thumbnails: http://www.bootply.com/79859