Cacher is the code snippet organizer for pro developers

https://stackoverflow.com/questions/19203816/vertical-divider-doesnt-work-in-bootstrap-3

Note: this is not available in Bootstrap, was removed

HTML:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
        <!-- <li><a href="#">Home</a></li>  -->
        <li><a href="{{ route('project.show') }}"><span class="glyphicon glyphicon-list" aria-hidden="true"></span> Projects</a></li>
        <li><a href="{{ route('project.create') }}"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Create new Project</a></li>
        <li class="divider-vertical"></li>
        <li><a href="{{ route('task.show') }}"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> Tasks</a></li>
        <li><a href="{{ route('task.create') }}"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Create new Task</a></li>

    </ul>
</div><!-- /.navbar-collapse -->



<style>
  
			.navbar .divider-vertical {
			    height: 50px;
			    margin: 0 9px;
			    border-right: 1px solid #8d8d8d;
			    border-left: 1px solid #8d8d8d;
			}
			
			.navbar-inverse .divider-vertical {
			    border-right-color: #222222;
			    border-left-color: #111111;
			}
			
			@media (max-width: 767px) {
			    .navbar-collapse .nav > .divider-vertical {
			        display: none;
			     }
			}     
  
</style>