title: How to make bootstrap thumbnail caurosel responsive?
body: <p>Hello i am trying to make a slider using bootstrap(thumbnail slider) and it is sliding but i want to slide one by one column (like first column: 1-2-3, second: 2-3-4, third: 3-4-1 and so on) but don't know where i am misleading, please help me out to make it.
  hints:
  in initial it will show column: 1-2-3
  then when i click right control it the column:1 should be hidden and column: 2 should shift to first place and column: 3rd to center and column:4 should show at last.</p>
  
  <p><strong>Hello guyz my problem is solved but how i can make it responsive please help me.</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('#myCarousel').carousel({
      interval: 10000
    })
    $('.fdi-Carousel .item').each(function() {
      var next = $(this).next();
      if (!next.length) {
        next = $(this).siblings(':first');
      }
      next.children(':first-child').clone().appendTo($(this));
  
      if (next.next().length &gt; 0) {
        next.next().children(':first-child').clone().appendTo($(this));
      } else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
      }
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.carousel-inner.onebyone-carosel {
    margin: auto;
    width: 90%;
  }
  
  .onebyone-carosel .active.left {
    left: -33.33%;
  }
  
  .onebyone-carosel .active.right {
    left: 33.33%;
  }
  
  .onebyone-carosel .next {
    left: 33.33%;
  }
  
  .onebyone-carosel .prev {
    left: -33.33%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  
  &lt;!-- Optional theme --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="span12"&gt;
        &lt;div class="well"&gt;
          &lt;div id="myCarousel" class="carousel fdi-Carousel slide"&gt;
            &lt;!-- Carousel items --&gt;
            &lt;div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0"&gt;
              &lt;div class="carousel-inner onebyone-carosel"&gt;
                &lt;div class="item active"&gt;
                  &lt;div class="col-md-4"&gt;
                    &lt;a href="#"&gt;&lt;img src="http://placehold.it/250x250" class="img-responsive center-block"&gt;&lt;/a&gt;
                    &lt;div class="text-center"&gt;1&lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                  &lt;div class="col-md-4"&gt;
                    &lt;a href="#"&gt;&lt;img src="http://placehold.it/250x250" class="img-responsive center-block"&gt;&lt;/a&gt;
                    &lt;div class="text-center"&gt;2&lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                  &lt;div class="col-md-4"&gt;
                    &lt;a href="#"&gt;&lt;img src="http://placehold.it/250x250" class="img-responsive center-block"&gt;&lt;/a&gt;
                    &lt;div class="text-center"&gt;3&lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                  &lt;div class="col-md-4"&gt;
                    &lt;a href="#"&gt;&lt;img src="http://placehold.it/250x250" class="img-responsive center-block"&gt;&lt;/a&gt;
                    &lt;div class="text-center"&gt;4&lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                  &lt;div class="col-md-4"&gt;
                    &lt;a href="#"&gt;&lt;img src="http://placehold.it/250x250" class="img-responsive center-block"&gt;&lt;/a&gt;
                    &lt;div class="text-center"&gt;5&lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                  &lt;div class="col-md-4"&gt;
                    &lt;a href="#"&gt;&lt;img src="http://placehold.it/250x250" class="img-responsive center-block"&gt;&lt;/a&gt;
                    &lt;div class="text-center"&gt;6&lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;a class="left carousel-control" href="#eventCarousel" data-slide="prev"&gt;&lt;/a&gt;
              &lt;a class="right carousel-control" href="#eventCarousel" data-slide="next"&gt;&lt;/a&gt;
            &lt;/div&gt;
            &lt;!--/carousel-inner--&gt;
          &lt;/div&gt;
          &lt;!--/myCarousel--&gt;
        &lt;/div&gt;
        &lt;!--/well--&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>