Vertical divider doesn t work in Bootstrap 3

Question

I opened the Nav example which comes with the standard Bootstrap download  bootstrap-3 0 0 examples navbar index html  and added vertical dividers between two of the links   However  it doesn t seem to make any difference to the navigation bar    lt div class  navbar-collapse collapse  gt   lt ul class  nav navbar-nav  gt   lt li class  active  gt  lt a href     gt Link1 lt  a gt  lt  li gt   lt li gt  lt a href     gt Link2 lt  a gt  lt  li gt   lt li class  divider-vertical  gt  lt  li gt   lt li gt  lt a href     gt Link3 lt  a gt  lt  li gt

User · Answer

divider-vertical   height  50px  margin  0 9px  border-left  1px solid  F2F2F2  border-right  1px solid  FFF      and now you can use it   lt ul gt       lt li class  divider-vertical  gt  lt  li gt   lt  ul gt

User · Answer

I find using the pipe character with some top and bottom padding works well  Using a div with a border will require more CSS to vertically align it and get the horizontal spacing even with the other elements   CSS   divider-vertical       padding-top  14px      padding-bottom  14px      HTML   lt ul class  nav navbar-nav  gt       lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt       lt li class  divider-vertical  gt  amp  124  lt  li gt       lt li gt  lt a href     gt Faq lt  a gt  lt  li gt       lt li class  divider-vertical  gt  amp  124  lt  li gt       lt li gt  lt a href     gt News lt  a gt  lt  li gt       lt li class  divider-vertical  gt  amp  124  lt  li gt       lt li gt  lt a href     gt Contact lt  a gt  lt  li gt   lt  ul gt

User · Answer

may be this will help also    navbar  divider-vertical       margin-top  14px      height  24px      border-left  1px solid  f2f2f2      border-image  linear-gradient to bottom  gray  rgba 0  0  0  0   1 100

User · Answer

I think this will bring it back using 3 0   navbar  divider-vertical       height  50px      margin  0 9px      border-right  1px solid  ffffff      border-left  1px solid  f2f2f2      navbar-inverse  divider-vertical       border-right-color   222222      border-left-color   111111      media  max-width  767px         navbar-collapse  nav  gt   divider-vertical           display  none

User · Answer

Here is some LESS for you  in case you customize the navbar    navbar  divider-vertical       height  floor  navbar-height -  navbar-margin-bottom       margin  floor  navbar-margin-bottom   2  9px      border-left  1px solid  f2f2f2      border-right  1px solid  ffffff

User · Answer

as i also wanted that same thing in a project u can do something like   HTML   lt div class  col-md-6  gt  lt  div gt   lt div class  divider-vertical  gt  lt  div gt   lt div class  col-md-5  gt  lt  div gt    CSS   divider-vertical       height  100px                       any height        border-left  1px solid gray         right or left is the same        float  left                         so BS grid doesn t break        opacity  0 5                        optional        margin  0 15px                      optional        LESS   divider-vertical  h 100   opa 1   mar 15        height  unit  h px                  change it to rem em etc          border-left  1px solid gray      float  left      opacity   opa      margin  0 unit  mar px              change it to rem em etc

[twitter-bootstrap] Vertical divider doesn't work in Bootstrap 3

Examples related to twitter-bootstrap