PRIMARY PAGE HEADER

Nav

Base nav

The .nav can be used with <ul> and <a>.

The base .nav component does not include any .active state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling. 
<ul class="nav mb-3">
    <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">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1">Disabled</a>
    </li>
</ul>

<nav class="nav">
    <a class="nav-link active" href="#">Active</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link disabled" href="#" tabindex="-1">Disabled</a>
</nav>

Alignments

.justify-content-start justify-content: flex-start;
.justify-content-end justify-content: flex-end;
.justify-content-center justify-content: center; 
<ul class="nav justify-content-left">
    <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">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1">Disabled</a>
    </li>
</ul>

<ul class="nav justify-content-center">
    ...
</ul>

<ul class="nav justify-content-end">
    ...
</ul>

Vertical alignment

.flex-column flex-direction: column; 
<ul class="nav flex-column">
    <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">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1">Disabled</a>
    </li>
</ul>

Tabs

.nav-tabs 
<!-- Regular -->
<ul class="nav nav-tabs">
    <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">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1">Disabled</a>
    </li>
</ul>

<!-- Width dropdown -->
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">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" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1">Disabled</a>
    </li>
</ul>

Pills

.nav-pills 
<!-- Regular -->
<ul class="nav nav-pills">
    <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">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1">Disabled</a>
    </li>
</ul>

<!-- Width dropdown -->
<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">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" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1">Disabled</a>
    </li>
</ul>

Fill and justify

.nav-fill
.nav-justify 
<ul class="nav nav-pills nav-fill">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Much longer nav link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1">Disabled</a>
    </li>
</ul>

<ul class="nav nav-pills nav-justified">
    ...
</ul>

When using a <nav>-based navigation, be sure to include .nav-item on the anchors.

<nav class="nav nav-pills nav-fill">
    <a class="nav-item nav-link active" href="#">Active</a>
    <a class="nav-item nav-link" href="#">Much longer nav link</a>
    <a class="nav-item nav-link" href="#">Link</a>
    <a class="nav-item nav-link disabled" href="#" tabindex="-1">Disabled</a>
</nav>

<nav class="nav nav-pills nav-justified">
    ...
</nav>

Javascript behavior

Remove the fade effect by removing the .fade class from the .tab-pane.

Content of tab 1
Content of tab 2
Content of tab 3
<!-- Using <ul> -->
<ul class="nav nav-tabs mb-3">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#tab1">Tab 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tab2">Tab 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tab3">Tab 3</a>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane fade show active" id="tab1">Content of tab 1</div>
    <div class="tab-pane fade" id="tab2">Content of tab 2</div>
    <div class="tab-pane fade" id="tab3">Content of tab 3</div>
</div>

<!-- Using <nav> -->
<nav>
    <div class="nav nav-tabs mb-3">
        <a class="nav-item nav-link active" data-toggle="tab" href="#nav-tab1">Home</a>
        <a class="nav-item nav-link" data-toggle="tab" href="#nav-tab2">Profile</a>
        <a class="nav-item nav-link" data-toggle="tab" href="#nav-tab3">Contact</a>
    </div>
</nav>

<div class="tab-content">
    <div class="tab-pane fade show active" id="nav-tab1">Content of tab 1</div>
    <div class="tab-pane fade" id="nav-tab2">Content of tab 2</div>
    <div class="tab-pane fade" id="nav-tab3">Content of tab 3</div>
</div>

Works with regular tabs and vertical tabs.

Content of tab 1
Content of tab 2
Content of tab 3
Home Profile Messages
Content of tab 1
Content of tab 2
Content of tab 3
<!-- Regular -->
<ul class="nav nav-pills mb-3">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#pills-tab1">Tab 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#pills-tab2">Tab 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#pills-tab3">Tab 3</a>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane fade show active" id="pills-tab1">Content of tab 1</div>
    <div class="tab-pane fade" id="pills-tab2">Content of tab 2</div>
    <div class="tab-pane fade" id="pills-tab3">Content of tab 3</div>
</div>

<!-- Vertical -->
<div class="row">
    <div class="col-3">
        <div class="nav flex-column nav-pills">
            <a class="nav-link active" data-toggle="pill" href="#v-pills-tab1">Home</a>
            <a class="nav-link" data-toggle="pill" href="#v-pills-tab2">Profile</a>
            <a class="nav-link" data-toggle="pill" href="#v-pills-tab3">Messages</a>
        </div>
    </div>
    <div class="col-9">
        <div class="tab-content">
            <div class="tab-pane fade show active" id="v-pills-tab1">Content of tab 1</div>
            <div class="tab-pane fade" id="v-pills-tab2">Content of tab 2</div>
            <div class="tab-pane fade" id="v-pills-tab3">Content of tab 3</div>
        </div>
    </div>
</div>