title: Bootstrap carousel different height images cause bouncing
body: <p>I've been using Bootstrap 3.3.7v's carousel class and it has been 
     straightforward so far, however one problem I've had is that images of 
     different heights cause the divs under it bounce and the images are 
     overflowing out the carousel. I have googled and followed some of answers in 
     stackoverflow, but those not solved my problem. I request anyone briefly 
     explain the issue.  </p>
  
  <pre><code>&lt;div class="col-md-6" style="padding:0px;"&gt;             
  &lt;div id="carousel-example-generic" class="carousel slide" data-    
  ride="carousel"&gt;
  &lt;!-- Indicators --&gt;
  &lt;ol class="carousel-indicators"&gt;
  &lt;li data-target="#carousel-example-generic" data-slide-to="0" 
  class="active"&gt;&lt;/li&gt;
  &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
  &lt;li data-target="#carousel-example-generic" data-slide-to="2"&gt;&lt;/li&gt;
  &lt;/ol&gt;
  
  &lt;!-- Wrapper for slides --&gt;
  &lt;div class="carousel-inner" role="listbox"&gt;  
  
  &lt;div class="item active"&gt;
    &lt;img src="images/slider/1.jpg" alt="blue"&gt;      
  &lt;/div&gt;
  
  &lt;div class="item"&gt;
    &lt;img src="images/slider/2.jpg" alt="purple"&gt;     
  &lt;/div&gt;
  
  &lt;div class="item"&gt;
    &lt;img src="images/slider/3.jpg" alt="red"&gt;     
  &lt;/div&gt;
  
  &lt;div class="item"&gt;
    &lt;img src="images/slider/4.jpg" alt="red"&gt;     
  &lt;/div&gt;
  
  &lt;div class="item"&gt;
    &lt;img src="images/slider/5.jpg" alt="red"&gt;     
  &lt;/div&gt;  
  &lt;/div&gt;
  
  &lt;!-- Controls --&gt;
  &lt;a class="left carousel-control" href="#carousel-example-generic" 
  role="button" data-slide="prev"&gt;
  &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
  &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
  &lt;/a&gt;
  &lt;a class="right carousel-control" href="#carousel-example-generic" 
  role="button" data-slide="next"&gt;
  &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
  &lt;span class="sr-only"&gt;Next&lt;/span&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>