Bootstrap carousel: images out of div when sliding
<div id="myCarousel" class="carousel slide span6" style="overflow:hidden">
<div id="carousel-inner">
<div class="active item">
<img src="img/abstract-landscape-paintings-bursting-sun.jpg" />
</div>
<div class="item">
<img src="img/charnwood_forest_landscape.jpg" />
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
Hey Friend add overflow hidden in the myCarousel id.
You can add this in your css :
.carousel { overflow: hidden; }
and
.item { overflow: hidden: }