jquery - Bootstrap colums not working properly -
i trying create bootstrap carousel single image sliding. example need.
my problem is, want display thumbnail images in bootstrap columns. in case 6 columns.
so tried -
<div class="container"> <div class="col-sm-12"> <div class="carousel slide" id="mycarousel"> <div class="carousel-inner"> <div class="item active"> <div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">1</a></div> </div> <div class="item"> <div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a></div> </div> <div class="item"> <div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">3</a></div> </div> <div class="item"> <div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">4</a></div> </div> <div class="item"> <div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">5</a></div> </div> <div class="item"> <div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">6</a></div> </div> <div class="item"> <div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">7</a></div> </div> <div class="item"> <div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">8</a></div> </div> </div> <a class="left carousel-control" href="#mycarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> <a class="right carousel-control" href="#mycarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> </div> </div> </div> problem display 3 columns. demo code sofar.
can tell me problem in code? thank you.
your code fine , need 6 sm-2 col
<div class="container"> <div class="col-sm-12"> <div class="carousel slide" id="mycarousel"> <div class="carousel-inner"> <div class="item active"> <div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">1</a> </div> <div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">1</a> </div><div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">1</a> </div><div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">1</a> </div><div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">1</a> </div><div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">1</a> </div> </div> <div class="item"> <div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a> </div> <div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a> </div><div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a> </div><div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a> </div><div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a> </div><div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a> </div><div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a> </div> </div> <div class="item"> <div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">3</a> </div> </div> <div class="item"> <div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">4</a> </div> </div> <div class="item"> <div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">5</a> </div> </div> <div class="item"> <div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">6</a> </div> </div> <div class="item"> <div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">7</a> </div> </div> <div class="item"> <div class="col-sm-2"> <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">8</a> </div> </div> </div> <a class="left carousel-control" href="#mycarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> <a class="right carousel-control" href="#mycarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> </div> </div>