title: Twitter Bootstrap Responsive Carousel With Multiple Items
body: <p>I'm trying to setup Twitter Bootstrap carousel with multiple items while maintaining the responsiveness. </p>
  
  <p>I have a jsfiddle for testing setup <a href="http://jsfiddle.net/Va8Un/" rel="noreferrer">http://jsfiddle.net/Va8Un/</a></p>
  
  <p>What I would like to happen is to display 4 images each with caption to hold item titles and so forth within a carousel pane and they should be resized to fit the screen to stay on the same row at all times. Right now it's completely ignoring any attempts I make to adjust the image size to the screen, I figured setting the img <code>max-width:100%;</code> would do the trick but it doesn't seem to effect it. Moreover, the 4th image is being pushed to a second row because the images aren't resizing:</p>
  
  <p><img src="https://i.stack.imgur.com/28Wfe.png" alt="enter image description here"></p>
  
  <p>Any way to fix this with pure CSS or should I look for options beyond Twitter Bootstrap?</p>
  
  <p>You can view the result here: <a href="http://jsfiddle.net/Va8Un/embedded/result/" rel="noreferrer">http://jsfiddle.net/Va8Un/embedded/result/</a></p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="carousel slide" id="myCarousel"&gt;
          &lt;div class="carousel-inner"&gt;
            &lt;div class="item active"&gt;
                  &lt;ul class="thumbnails span12"&gt;
                      &lt;li&gt;
                          &lt;div class="caption"&gt;
                              &lt;h5&gt;Caption&lt;/h5&gt;
                          &lt;/div&gt;
                          &lt;div class="thumbnail"&gt;
                              &lt;img src="http://placehold.it/260x180" alt=""&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;div class="caption"&gt;
                              &lt;h5&gt;Caption&lt;/h5&gt;
                          &lt;/div&gt;
                          &lt;div class="thumbnail"&gt;
                              &lt;img src="http://placehold.it/260x180" alt=""&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;div class="caption"&gt;
                              &lt;h5&gt;Caption&lt;/h5&gt;
                          &lt;/div&gt;
                          &lt;div class="thumbnail"&gt;
                              &lt;img src="http://placehold.it/260x180" alt=""&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;div class="caption"&gt;
                              &lt;h5&gt;Caption&lt;/h5&gt;
                          &lt;/div&gt;
                          &lt;div class="thumbnail"&gt;
                              &lt;img src="http://placehold.it/260x180" alt=""&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
            &lt;/div&gt;         
            &lt;div class="item"&gt;
                 ...
            &lt;/div&gt;
            &lt;div class="item"&gt;
                 ...
            &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;a data-slide="prev" href="#myCarousel" class="left carousel-control"&gt;‹&lt;/a&gt;
          &lt;a data-slide="next" href="#myCarousel" class="right carousel-control"&gt;›&lt;/a&gt;
      &lt;/div&gt;
  &lt;/diV&gt;
  </code></pre>