Vertical divider doesn't work in Bootstrap 3
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>
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>
as i also wanted that same thing in a project u can do something like
HTML
<div class="col-md-6"></div>
<div class="divider-vertical"></div>
<div class="col-md-5"></div>
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.. */
}