Bootstrap4 adding scrollbar to div

Question

I am using stacked pills inside a div  The problem is  sometimes the div contains a lot of pills  How can I add a scrollbar for it    lt div class  row col-md-2  gt   lt ul class  nav nav-pills nav-stacked  gt     lt li class  nav-item  gt       lt a class  nav-link active  href     gt Active lt  a gt     lt  li gt     lt li class  nav-item  gt       lt a class  nav-link  href     gt Link lt  a gt     lt  li gt     lt li class  nav-item  gt       lt a class  nav-link  href     gt Link lt  a gt     lt  li gt     lt li class  nav-item  gt       lt a class  nav-link disabled  href     gt Disabled lt  a gt     lt  li gt   lt  ul gt   lt  div gt    Can I add a class for the div to make stacked pills scrollable

User · Accepted Answer

Yes  It is possible  Just add a class like anyclass and give some CSS style  Live    anyClass     height 150px    overflow-y  scroll       x000D   x000D   anyClass   x000D    height 150px  x000D    overflow-y  scroll  x000D    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 5 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt div class   col-md-2  gt  x000D     lt ul class  nav nav-pills nav-stacked anyClass  gt  x000D       lt li class  nav-item  gt  x000D         lt a class  nav-link active  href     gt Active lt  a gt  x000D       lt  li gt  x000D       lt li class  nav-item  gt  x000D         lt a class  nav-link  href     gt Link lt  a gt  x000D       lt  li gt  x000D       lt li class  nav-item  gt  x000D         lt a class  nav-link  href     gt Link lt  a gt  x000D       lt  li gt  lt li class  nav-item  gt  x000D         lt a class  nav-link  href     gt Link lt  a gt  x000D       lt  li gt  x000D       lt li class  nav-item  gt  x000D         lt a class  nav-link  href     gt Link lt  a gt  x000D       lt  li gt  lt li class  nav-item  gt  x000D         lt a class  nav-link  href     gt Link lt  a gt  x000D       lt  li gt  x000D       lt li class  nav-item  gt  x000D         lt a class  nav-link  href     gt Link lt  a gt  x000D       lt  li gt  lt li class  nav-item  gt  x000D         lt a class  nav-link  href     gt Link lt  a gt  x000D       lt  li gt  x000D       lt li class  nav-item  gt  x000D         lt a class  nav-link  href     gt Link lt  a gt  x000D       lt  li gt  lt li class  nav-item  gt  x000D         lt a class  nav-link  href     gt Link lt  a gt  x000D       lt  li gt  x000D       lt li class  nav-item  gt  x000D         lt a class  nav-link  href     gt Link lt  a gt  x000D       lt  li gt  x000D       lt li class  nav-item  gt  x000D         lt a class  nav-link disabled  href     gt Disabled lt  a gt  x000D       lt  li gt  x000D     lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Use the overflow-y  scroll property on the element that contains the elements   The overflow-y property specifies whether to clip the content  add a scroll bar  or display overflow content of a block-level element  when it overflows at the top and bottom edges   Sometimes it is interesting to place a height for the element next to the overflow-y property  as in the example below    lt ul class  nav nav-pills nav-stacked  style  height  250px  overflow-y  scroll   gt     lt li class  nav-item  gt       lt a class  nav-link active  href     gt Active lt  a gt     lt  li gt     lt li class  nav-item  gt       lt a class  nav-link  href     gt Link lt  a gt     lt  li gt     lt li class  nav-item  gt       lt a class  nav-link  href     gt Link lt  a gt     lt  li gt     lt li class  nav-item  gt       lt a class  nav-link disabled  href     gt Disabled lt  a gt     lt  li gt   lt  ul gt

User · Answer

x000D   x000D   Scroll     height 600px    overflow-y  scroll    x000D   lt  DOCTYPE html gt   lt html gt   lt head gt   lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt script gt   lt  script gt   lt  head gt   lt body gt    lt h1 gt Smooth Scroll lt  h1 gt    lt div class  Scroll  gt     lt div class  main  id  section1  gt       lt h2 gt Section 1 lt  h2 gt       lt p gt Click on the link to see the  smooth  scrolling effect  lt  p gt       lt p gt Note  Remove the scroll-behavior property to remove smooth scrolling  lt  p gt     lt  div gt     lt div class  main  id  section2  gt       lt h2 gt Section 2 lt  h2 gt       lt p gt Knowing how to write a paragraph is incredibly important  It   s a basic aspect of writing  and it is something that everyone should know how to do  There is a specific structure that you have to follow when you   re writing a paragraph  This structure helps make it easier for the reader to understand what is going on  Through writing good paragraphs  a person can communicate a lot better through their writing  lt  p gt     lt  div gt     lt div class  main  id  section3  gt       lt h2 gt Section 3 lt  h2 gt       lt p gt Knowing how to write a paragraph is incredibly important  It   s a basic aspect of writing  and it is something that everyone should know how to do  There is a specific structure that you have to follow when you   re writing a paragraph  This structure helps make it easier for the reader to understand what is going on  Through writing good paragraphs  a person can communicate a lot better through their writing  lt  p gt     lt  div gt     lt div class  main  id  section4  gt       lt h2 gt Section 4 lt  h2 gt       lt p gt Knowing how to write a paragraph is incredibly important  It   s a basic aspect of writing  and it is something that everyone should know how to do  There is a specific structure that you have to follow when you   re writing a paragraph  This structure helps make it easier for the reader to understand what is going on  Through writing good paragraphs  a person can communicate a lot better through their writing  lt  p gt     lt  div gt      lt div class  main  id  section5  gt       lt h2 gt Section 5 lt  h2 gt       lt a href   section1  gt Click Me to Smooth Scroll to Section 1 Above lt  a gt     lt  div gt     lt div class  main  id  section6  gt       lt h2 gt Section 6 lt  h2 gt       lt p gt Knowing how to write a paragraph is incredibly important  It   s a basic aspect of writing  and it is something that everyone should know how to do  There is a specific structure that you have to follow when you   re writing a paragraph  This structure helps make it easier for the reader to understand what is going on  Through writing good paragraphs  a person can communicate a lot better through their writing  lt  p gt     lt  div gt     lt div class  main  id  section7  gt       lt h2 gt Section 7 lt  h2 gt       lt a href   section1  gt Click Me to Smooth Scroll to Section 1 Above lt  a gt     lt  div gt   lt  div gt   lt  body gt   lt  html gt  x000D   x000D   x000D

User · Answer

lt div class  quot overflow-auto p-3 mb-3 mb-md-0 mr-md-3 bg-light quot  style  quot max-width  260px  max-height  100px  quot  gt           lt strong gt Column 0  lt  strong gt  lt br gt           lt strong gt Column 1 lt  strong gt  lt br gt           lt strong gt Column 2 lt  strong gt  lt br gt           lt strong gt Column 3 lt  strong gt  lt br gt           lt strong gt Column 4 lt  strong gt  lt br gt           lt strong gt Column 5 lt  strong gt  lt br gt           lt strong gt Column 6 lt  strong gt  lt br gt           lt strong gt Column 7 lt  strong gt  lt br gt           lt strong gt Column 8 lt  strong gt  lt br gt           lt strong gt Column 9 lt  strong gt  lt br gt           lt strong gt Column 10 lt  strong gt  lt br gt           lt strong gt Column 11 lt  strong gt  lt br gt           lt strong gt Column 12 lt  strong gt  lt br gt           lt strong gt Column 13 lt  strong gt  lt br gt         lt  div gt       lt  div gt

[bootstrap-4] Bootstrap4 adding scrollbar to div

Examples related to bootstrap-4