Bootstrap 3: Scroll bars

Question

I am using Bootstrap 3 and have a list of subjects inside a side nav. The sidenav is long and I would like to make it that there is a scrollbar inside of the sidenav that displays 8 elements before having to scroll down.

Here is my code below:

 <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation"   style="float:left">       <div class="well sidebar-nav">         <ul class="nav">           <li><strong>Select a subject</strong></li>           <li class="active"><a href="#">Maths</a></li>           <li><a href="#">English</a></li>           <li><a href="#">Art and Design</a></li>           <li><a href="#">Drama</a></li>           <li><a href="#">Music</a></li>           <li><a href="#">Physics</a></li>           <li><a href="#">Chemistry</a></li>           <li><a href="#">Biology</a></li>           <li><a href="#">Home economics</a></li>           <li><a href="#">Physical Education</a></li>           <li><a href="#">Computing Science</a></li>           <li><a href="#">French</a></li>           <li><a href="#">German</a></li>           <li><a href="#">Mandarin</a></li>           <li><a href="#">Religious Education</a></li>           <li><a href="#">Modern Studies</a></li>           <li><a href="#">Geography</a></li>           <li><a href="#">History</a></li>           <li><a href="#">Creative computing</a></li>           <li><a href="#">Craft, Design and Technology</a></li>         </ul>       </div><!--/.well -->     </div><!--/span-->   </div><!--/row--> 

Answer 1

You need to use overflow option like below:

.nav{     max-height: 300px;     overflow-y: scroll;  } 

Change the height according to amount of items you need to show