Bootstrap 3 vertical divider in less

Bootstrap 3 vertical divider

.nav > li.divider {
    display: none;
    @media (min-width: @screen-sm) {
        display: block;
        & > a {
            padding-left: 0;
            padding-right: 0;
            cursor: default;

            &:hover,
            &:active,
            &:focus {
                background-color: inherit;
                color: @brand-primary;
                text-decoration: inherit;
            }
        }
    }
}

Example

---

<ul class="nav navbar-nav">
    <li><a href="#">Item</a></li>
    <li role="separator" class="divider"><a>|</a></li>
    <li><a href="#">Item</a></li>
</ul>

---