title: Bootstrap Carousel white space
body: <p>Everytime a new slide comes into the Carousel, it has a small white space under under it as it slides, when it gets to the resting area in the middle, it quickly shoots down to settle where it should. The white space only seems to be about 10-15px, but it happens on every slide.</p>
  
  <p>I am using the default Carousel with Bootstrap. This is my code, not sure if it is having an issue here or elsewhere.</p>
  
  <pre><code>&lt;div class="row "&gt;
  &lt;div class="col-md-12"&gt;
      &lt;div class="carousel slide" id="theCarousel"                data-interval="4000"&gt;
  
          &lt;ol class="carousel-indicators"&gt;
              &lt;li data-target="#theCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
              &lt;li data-target="#theCarousel" data-slide-to="1"&gt;&lt;/li&gt;
              &lt;li data-target="#theCarousel" data-slide-to="2"&gt;&lt;/li&gt;
              &lt;li data-target="#theCarousel" data-slide-to="3"&gt;&lt;/li&gt;
          &lt;/ol&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="carousel-inner"&gt;
                  &lt;div class="item active"&gt;
                      &lt;img src="img/berwick5.jpg" alt="1" class="img-responsive"/&gt;
                  &lt;/div&gt;
                  &lt;div class="item "&gt;
                      &lt;img src="img/pic3_e.jpg" alt="2" class="img-responsive"/&gt;
                  &lt;/div&gt;
                  &lt;div class="item "&gt;
                      &lt;img src="img/pic1_e.jpg" alt="3" class="img-responsive"/&gt;
                  &lt;/div&gt;
                  &lt;div class="item "&gt;
                      &lt;img src="img/pic2_e.jpg" alt="4" class="img-responsive"/&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>