Bootstrap 3 Multi Column Responsive Carousel

I've been playing with the bootstrap carousel, trying to make it display 4 columns per slide, responsively. The responsive side of things is perfect, however when the last slide s

Solution 1:

The problem is that you have the carousel controls within .carousel-inner - you just need to place them outside of this class:

</div><!-- Close the .carousel-inner class before the controls --><aclass="left carousel-control"href="#carousel-example-generic"data-slide="prev"><spanclass="icon-prev"></span></a><aclass="right carousel-control"href="#carousel-example-generic"data-slide="next"><spanclass="icon-next"></span></a>

Example: http://jsfiddle.net/S2rnm/789/

Solution 2:

I try this code working proper

<linkrel="stylesheet"href="http://webdesign9.in/css/bootstrap.min.css" /><linkrel="stylesheet"href="http://webdesign9.in/css/bootstrap-theme.min.css" /><scriptsrc="http://webdesign9.in/js/jquery.js"></script><scriptsrc="http://webdesign9.in/js/bootstrap.min.js"></script><divid="myCarousel"class="carousel slide"><!-- Carousel items --><divclass="carousel-inner"><divclass="item active"><divclass="row"><divclass="col-sm-2 col-xs-6"><ahref="#x"><imgsrc="images/whole_squid.jpg"alt="Image"class="img-responsive"></a></div><divclass="col-sm-2 col-xs-6"><ahref="#x"><imgsrc="images/whole_cuttlefish.jpg"alt="Image"class="img-responsive"></a></div><divclass="col-sm-2 col-xs-6"><ahref="#x"><imgsrc="images/whole_cleaned_squid.jpg"alt="Image"class="img-responsive"></a></div><divclass="col-sm-2 col-xs-6"><ahref="#x"><imgsrc="images/whole_cleaned_octopus.jpg"alt="Image"class="img-responsive"></a></div><divclass="col-sm-2 col-xs-6"><ahref="#x"><imgsrc="images/whole_cleaned_cuttlefish.jpg"alt="Image"class="img-responsive"></a></div><divclass="col-sm-2 col-xs-6"><ahref="#x"><imgsrc="images/reef_cod.jpg"alt="Image"class="img-responsive"></a></div></div><!--/row--></div><!--/item--><divclass="item"><divclass="row"><divclass="col-sm-2 col-xs-6"><ahref="#x"><imgsrc="images/leather_jacktfish.jpg"alt="Image"class="img-responsive"></a></div><divclass="col-sm-2 col-xs-6"><ahref="#x"><imgsrc="images/ribbonfish.jpg"alt="Image"class="img-responsive"></a></div><divclass="col-sm-2 col-xs-6"><ahref="#x"><imgsrc="images/croaker1.jpg"alt="Image"class="img-responsive"></a></div><divclass="col-sm-2 col-xs-6"><ahref="#x"><imgsrc="images/shrimp_black_tiger.jpg"alt="Image"class="img-responsive"></a></div><divclass="col-sm-2 col-xs-6"><ahref="#x"><imgsrc="images/whole_cuttlefish.jpg"alt="Image"class="img-responsive"></a></div><divclass="col-sm-2 col-xs-6"><ahref="#x"><imgsrc="images/whole_cleaned_squid.jpg"alt="Image"class="img-responsive"></a></div></div><!--/row--></div><!--/item--></div><!--/carousel-inner--><aclass="left carousel-control"href="#myCarousel"data-slide="prev"><iclass="fa fa-chevron-left fa-4"></i></a><aclass="right carousel-control"href="#myCarousel"data-slide="next"><iclass="fa fa-chevron-right fa-4"></i></a></div>