Как добавить автоматический прокрутки внутри стиля автозагрузки bootstrap

Question

Я создаю индикатор выполнения. Я хочу показать первые три индикатора выполнения и скрыть следующие два, и после прокрутки этого миниатюры я смогу увидеть объект 4 и объект 5 индикатор выполнения. Вот мой JSFIDDLE Sample HTML и CSS.

<div class="container"> 
<div class="row">     
    <div class="thumbnail"> 
     <div class="thumbnail"> 
      <img class="small-image" src="http://marccortez.com/wp-content/uploads/2013/04/reading-small1.jpg"/> 
     </div> 
     <div class="thumbnail"> 
      <div class="progress-broad"> 
       <div class="progress-bar progress-bar-success" style="width:70%"> 
       </div> 
       <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%">            
       </div> 
       <span class="course-progressbar-name">Mathematics</span> 
       <span class="course-grade-percentage">60%</span> 
       <span class="course-grade-label">GRADE</span>  
      </div> 
      <div class="progress-broad"> 
       <div class="progress-bar progress-bar-success" style="width:70%"> 
       </div> 
       <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%">            
       </div> 
       <span class="course-progressbar-name">Biology</span> 
       <span class="course-grade-percentage">60%</span> 
       <span class="course-grade-label">GRADE</span>  
      </div> 
      <div class="progress-broad"> 
       <div class="progress-bar progress-bar-success" style="width:70%"> 
       </div> 
       <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%">            
       </div> 
       <span class="course-progressbar-name">Physics</span> 
       <span class="course-grade-percentage">60%</span> 
       <span class="course-grade-label">GRADE</span>  
      </div> 
      <div class="progress-broad"> 
       <div class="progress-bar progress-bar-success" style="width:70%"> 
       </div> 
       <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%">            
       </div> 
       <span class="course-progressbar-name">subject4</span> 
       <span class="course-grade-percentage">60%</span> 
       <span class="course-grade-label">GRADE</span>  
       </div> 
      <div class="progress-broad"> 
       <div class="progress-bar progress-bar-success" style="width:70%"> 
       </div> 
       <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%">            
       </div> 
       <span class="course-progressbar-name">subject5</span> 
       <span class="course-grade-percentage">60%</span> 
       <span class="course-grade-label">GRADE</span>  
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

попробовать это

<div class="container"> 
<div class="row">     
    <div class="thumbnail"> 
     <div class="thumbnail"> 
      <img class="small-image" src="http://marccortez.com/wp-content/uploads/2013/04/reading-small1.jpg"/> 
     </div> 
     <div class="thumbnail editor"> 
      <div class="progress-broad"> 
       <div class="progress-bar progress-bar-success" style="width:70%"> 
       </div> 
       <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%">            
       </div> 
       <span class="course-progressbar-name">Mathematics</span> 
       <span class="course-grade-percentage">60%</span> 
       <span class="course-grade-label">GRADE</span>  
      </div> 
      <div class="progress-broad"> 
       <div class="progress-bar progress-bar-success" style="width:70%"> 
       </div> 
       <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%">            
       </div> 
       <span class="course-progressbar-name">Biology</span> 
       <span class="course-grade-percentage">60%</span> 
       <span class="course-grade-label">GRADE</span>  
      </div> 
      <div class="progress-broad"> 
       <div class="progress-bar progress-bar-success" style="width:70%"> 
       </div> 
       <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%">            
       </div> 
       <span class="course-progressbar-name">Physics</span> 
       <span class="course-grade-percentage">60%</span> 
       <span class="course-grade-label">GRADE</span>  
      </div> 
      <div class="progress-broad"> 
       <div class="progress-bar progress-bar-success" style="width:70%"> 
       </div> 
       <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%">            
       </div> 
       <span class="course-progressbar-name">subject4</span> 
       <span class="course-grade-percentage">60%</span> 
       <span class="course-grade-label">GRADE</span>  
       </div> 
      <div class="progress-broad"> 
       <div class="progress-bar progress-bar-success" style="width:70%"> 
       </div> 
       <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%">            
       </div> 
       <span class="course-progressbar-name">subject5</span> 
       <span class="course-grade-percentage">60%</span> 
       <span class="course-grade-label">GRADE</span>  
      </div> 
     </div> 
    </div> 
</div> 

Я добавил дополнительный CSS:

.editor{ 
    height: 190px; 
    overflow-y: visible; 
    overflow-x:hidden; 
    width: 100%; 
} 
.progress-broad{ 
    position:relative; 
} 

code here