Navigation components in Bootstrap share some general markup and styles, from the base
.navclass to the active and disabled states.
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Use
.nav-bold,
.nav-bolderand
.nav-boldestto set font weight to nav links.
<ul class="nav nav-bold">
...
</ul>
<ul class="nav nav-bolder">
...
</ul>
<ul class="nav nav-boldest">
...
</ul>
Change the horizontal alignment of your nav with
flexbox utilities. flexbox utilities. By default, navs are left-aligned, but you can easily change them to center or right aligned.
Centered with
.justify-content-center:
<ul class="nav justify-content-center">
...
</ul>
Right-aligned with
.justify-content-end:
<ul class="nav justify-content-end">
...
</ul>
Stack your navigation by changing the flex item direction with the
.flex-columnutility.
<ul class="nav flex-column">
...
</ul>
Add the
.nav-tabsclass to generate a tabbed interface. Use them to create tabbable regions with the
Tab JavaScript plugin.
<ul class="nav nav-tabs" id="myTab" role="tablist">
...
</ul>
<div class="tab-content mt-5" id="myTabContent">
...
</div>
Add
.nav-pillswithin
.nav-tabsto create pill shape navs.
<ul class="nav nav-pills" id="myTab" role="tablist">
...
</ul>
<div class="tab-content mt-5" id="myTabContent">
...
</div>
Use the standard bootstrap state color classes
nav-{color}to change the active pill color.
<ul class="nav nav-success nav-pills" id="myTab" role="tablist">
...
</ul>
<div class="tab-content mt-5" id="myTabContent">
...
</div>
Use the standard bootstrap state color classes
nav-light-{color}to set the light pill color style.
<ul class="nav nav-light-success nav-pills" id="myTab" role="tablist">
...
</ul>
<div class="tab-content mt-5" id="myTabContent">
...
</div>
Use
nav-fillclass to fill and justify.
<ul class="nav nav-pills nav-fill">
...
</ul>
Add Bootstrap's
.flex-columnclass for vertical navs.
<div class="row">
<div class="col-4">
<ul class="nav flex-column nav-pills">
...
</ul>
</div>
<div class="col-8">
<div class="tab-content" id="myTabContent">
...
</div>
</div>
</div>
