View on GitHub
Bordered nav
The bordered nav builds on Bootstrap’s nav base styles with a new, bolder variation to nav links.
On this page
Examples
<ul class="nav nav-bordered">
<li class="nav-item">
<a class="nav-link active" href="#">Bold</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Minimal</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Components</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Docs</a>
</li>
</ul>
Stacked
Bordered nav links can also be stacked.
<ul class="nav nav-bordered nav-stacked flex-column">
<li class="nav-header">Examples</li>
<li class="nav-item">
<a class="nav-link active" href="#">Bold</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Minimal</a>
</li>
<li class="nav-header">Sections</li>
<li class="nav-item">
<a class="nav-link" href="#">Grid</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
CSS
Sass variables
$nav-bordered-color: $nav-link-color;
$nav-bordered-color-active: $primary;
$nav-bordered-font-weight: 700;
$nav-bordered-font-weight-active: 700;
$nav-bordered-border-width: $border-width * 4;
$nav-bordered-divider-color: rgba($white, .2);
$nav-bordered-divider-margin-top: $spacer * 1.3;
$nav-bordered-divider-margin-bottom: $spacer * 1.6;