title: Bootstrap carousel how to hide one item from slider on xs size?
body: <p>How I can hide one or two items from the bootstrap-carousel only on xs-size ? </p>
  
  <p>When I added class 'hidden-xs' to this item in carousel and item div looks like:</p>
  
  <pre><code>&lt;div class="item hidden-xs"&gt;
        &lt;img src="imgTop2.jpg" alt="..."&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>All the items and the carousel disappeared.</p>
  
  <p>The same problem exist when i add 'hidden-xs' class to img element for this item.</p>
  
  <p>How can I fix that ? I want to hide on xs only one or two slides. Others must by visible.</p>
  
  <p>My code looks like:</p>
  
  <pre><code>&lt;div id="carousel-top" class="carousel slide" data-ride="carousel"&gt;
      &lt;!-- Indicators --&gt;
      &lt;ol class="hidden carousel-indicators" style="display:none"&gt;
        &lt;li data-target="#carousel-top" data-slide-to="0" class="active"&gt;&lt;/li&gt;
        &lt;li class="" data-target="#carousel-top" data-slide-to="1"&gt;&lt;/li&gt;
        &lt;li class="" data-target="#carousel-top" 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="imgTop.jpg" alt="..."&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img src="imgTop2.jpg" alt="..."&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img src="imgTop3.jpg" alt="..."&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img src="imgTop4.jpg" alt="..."&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img src="imgTop5.jpg" alt="..."&gt;
      &lt;/div&gt;
  
  
      &lt;/div&gt;
  
      &lt;!-- Controls --&gt;
      &lt;a class="hidden left carousel-control" href="#carousel-top" 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="hidden right carousel-control" href="#carousel-top" 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;
  </code></pre>