title: Bootstrap thumbnail slider : Displaying number of images based on screen
body: <p>I have created a bootstrap image thumbnail slider.I am displaying four images in the slider  in a normal screen size.</p>
  
  <p><a href="http://bootply.com/75458" rel="nofollow noreferrer">Demo url:</a></p>
  
  <p>Now I want to display only one image in the thumbnail slider on the small screen as per responsive.</p>
  
  <p><img src="https://i.stack.imgur.com/x95BS.jpg" alt="My current design image"></p>
  
  <p><img src="https://i.stack.imgur.com/m9spo.jpg" alt="My required design model"></p>
  
  <p><strong>Please advice me.I am new bee to the responsive design.</strong></p>
  
  <p>My code:</p>
  
  <pre><code>&lt;div class="container"&gt;
  
    &lt;div class="span8"&gt;
  
      &lt;h1&gt;Bootstrap Thumbnail Slider&lt;/h1&gt;
  
      &lt;div class="well"&gt;
  
      &lt;div id="myCarousel" class="carousel slide"&gt;
  
      &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
      &lt;/ol&gt;
  
      &lt;!-- Carousel items --&gt;
      &lt;div class="carousel-inner"&gt;
  
      &lt;div class="item active"&gt;
          &lt;div class="row-fluid"&gt;
            &lt;div class="span3"&gt;&lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"&gt;&lt;/a&gt;&lt;/div&gt;
            &lt;div class="span3"&gt;&lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"&gt;&lt;/a&gt;&lt;/div&gt;
            &lt;div class="span3"&gt;&lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"&gt;&lt;/a&gt;&lt;/div&gt;
            &lt;div class="span3"&gt;&lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;&lt;!--/row-fluid--&gt;
      &lt;/div&gt;&lt;!--/item--&gt;
  
      &lt;div class="item"&gt;
          &lt;div class="row-fluid"&gt;
              &lt;div class="span3"&gt;&lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div class="span3"&gt;&lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div class="span3"&gt;&lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div class="span3"&gt;&lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;&lt;!--/row-fluid--&gt;
      &lt;/div&gt;&lt;!--/item--&gt;
  
      &lt;div class="item"&gt;
          &lt;div class="row-fluid"&gt;
              &lt;div class="span3"&gt;&lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div class="span3"&gt;&lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div class="span3"&gt;&lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div class="span3"&gt;&lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;&lt;!--/row-fluid--&gt;
      &lt;/div&gt;&lt;!--/item--&gt;
  
      &lt;/div&gt;&lt;!--/carousel-inner--&gt;
  
      &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;‹&lt;/a&gt;
      &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;›&lt;/a&gt;
      &lt;/div&gt;&lt;!--/myCarousel--&gt;
  
      &lt;/div&gt;&lt;!--/well--&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>