Menu
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:
<div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li class="divider-vertical"></li> <li><a href="#">Link3</a></li> 
595
To make a vertical line, use border-left or border-right property. The height property is used to set the height of border (vertical line) element. Position property is used to set the position of vertical line.
hr elements will automatically become vertical. You just need to set it's height property (e.g. height: 80%;).
You can use <hr> , as it is semantically correct, and then use CSS to convert it to a vertical line.
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 > .divider-vertical { display: none; } } 
.divider-vertical { height: 50px; margin: 0 9px; border-left: 1px solid #F2F2F2; border-right: 1px solid #FFF; } and now you can use it
<ul> <li class="divider-vertical"></li> </ul> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
