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.

Answer 1

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

    
Home
    
|
    
Faq
    
|
    
News
    
|
    
Contact