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     lt div class  col-xs-6 col-sm-3 sidebar-offcanvas  id  sidebar  role  navigation    style  float left  gt         lt div class  well sidebar-nav  gt           lt ul class  nav  gt             lt li gt  lt strong gt Select a subject lt  strong gt  lt  li gt             lt li class  active  gt  lt a href     gt Maths lt  a gt  lt  li gt             lt li gt  lt a href     gt English lt  a gt  lt  li gt             lt li gt  lt a href     gt Art and Design lt  a gt  lt  li gt             lt li gt  lt a href     gt Drama lt  a gt  lt  li gt             lt li gt  lt a href     gt Music lt  a gt  lt  li gt             lt li gt  lt a href     gt Physics lt  a gt  lt  li gt             lt li gt  lt a href     gt Chemistry lt  a gt  lt  li gt             lt li gt  lt a href     gt Biology lt  a gt  lt  li gt             lt li gt  lt a href     gt Home economics lt  a gt  lt  li gt             lt li gt  lt a href     gt Physical Education lt  a gt  lt  li gt             lt li gt  lt a href     gt Computing Science lt  a gt  lt  li gt             lt li gt  lt a href     gt French lt  a gt  lt  li gt             lt li gt  lt a href     gt German lt  a gt  lt  li gt             lt li gt  lt a href     gt Mandarin lt  a gt  lt  li gt             lt li gt  lt a href     gt Religious Education lt  a gt  lt  li gt             lt li gt  lt a href     gt Modern Studies lt  a gt  lt  li gt             lt li gt  lt a href     gt Geography lt  a gt  lt  li gt             lt li gt  lt a href     gt History lt  a gt  lt  li gt             lt li gt  lt a href     gt Creative computing lt  a gt  lt  li gt             lt li gt  lt a href     gt Craft  Design and Technology lt  a gt  lt  li gt           lt  ul gt         lt  div gt  lt  --  well -- gt       lt  div gt  lt  -- span-- gt     lt  div gt  lt  -- row-- gt

User · Answer

You need to use the overflow option  but with the following parameters    nav       max-height 300px      overflow-y auto        Use overflow-y auto  so the scrollbar only appears when the content exceeds the maximum height    If you use overflow-y scroll  the scrollbar will always be visible -  on all  nav -  regardless if the content exceeds the maximum heigh or not   Presumably you want something that adapts itself to the content rather then the the opposite   Hope it may helpful

User · Answer

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

[javascript] Bootstrap 3: Scroll bars

Examples related to javascript

Examples related to html

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3