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>


-

Popular posts from this blog

html/hta mutiple file in audio player -

ok started coding .hta application , pretty html page .hta extension , adde mp3 player , did work <object data="test.mp3" type="audio/mp3" width="200" height="40"> <param name="src" value="test.mp3"> <param name="autostart" value="0"> </object> but it's 1 song playing again , again , plz there way add multiple files playlist believe it's should added "src" parameters not sure, i'm starting did add "," in between , , tried ";" none of them working i'm waiting answers :d i wanna know if can show me how become familiar tag see it's helpful , powerful activex, audio,video,pdf .... files i'm waiting impatiently [i don't know object, plz plz more clear] get inspired example hta_audio_player.hta <html> <head> <title>hackoo audio player playlist hackoo 2014</title> <hta:app...
Read more

debugging - Reference - What does this error mean in PHP? -

what this? this number of answers warnings, errors , notices might encounter while programming php , have no clue how fix. community wiki, invited participate in adding , maintaining list. why this? questions "headers sent" or "calling member of non-object" pop on stack overflow. root cause of questions same. answers questions typically repeat them , show op line change in his/her particular case. these answers not add value site because apply op's particular code. other users having same error can not read solution out of because localized. sad, because once understood root cause, fixing error trivial. hence, list tries explain solution in general way apply. what should here? if question has been marked duplicate of this, please find error message below , apply fix code. answers contain further links investigate in case shouldn't clear general answer alone. if want contribute, please add "favorite" error message, warning or notic...
Read more